/* 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-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; 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; }
@font-face { font-family: "Poppins"; src: url("./webfonts/Poppins-BlackItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; 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;*/ /* 17, 17, 17 */
    /*--light: #f7f7f4;*/ /* 247, 247, 244 */
    /*--muted: color-mix(in srgb, light-dark(#111111, #f7f7f4) 60%, transparent);*/
    /*--muted-more: color-mix(in srgb, light-dark(#111111, #f7f7f4) 30%, transparent);*/
    /*--card: light-dark(rgba(17,17,17,.1), rgba(247,247,244,.1));*/
    /*--card-alt: light-dark(rgba(17,17,17,.05), rgba(247,247,244,.05));*/
    
    /*--background: light-dark(#f7f7f4, #111111);*/
    /*--text-color: light-dark(#111111, #f7f7f4);*/
    
    --black: #000;
    --white: #fff;
    /*--grey: light-dark(#0009, #fff9);*/
    --grey: light-dark(rgb(0 0 0 / 60%), rgb(255 255 255 / 60%));
    /*--gray-dark: light-dark(#0000000a, #ffffff1f);*/
    --gray-dark: light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 8%));
    /*--grey-muted: light-dark(#0000004d, #ffffff4d);*/
    --grey-muted: light-dark(rgb(0 0 0 / 30%), rgb(255 255 255 / 30%));
    
    /*color-mix(in oklab, var(--card), var(--text-color) 5%);*/
    
    --accent: light-dark(#2e93b0, #c6e5ff);
    --accent-muted: light-dark(#2e93b00d, #c6e5ff0d);
    
    /*--fade: light-dark(#0000000a, #ffffff0a);*/
    --fade: light-dark(rgb(0 0 0 / 2%), rgb(255 255 255 / 4%));
    
    --background: light-dark(var(--white), var(--black));
    --text-color: light-dark(var(--black), var(--white));
    
    --dark: var(--black);
    --light: var(--white);
    --muted: var(--grey);
    --muted-more: var(--grey-muted);
    --card: var(--gray-dark);
    --card-alt: var(--gray-dark);
    
    --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;

    --font-size: clamp(16px, calc(0.3vw + 15px), 18px);
    
    /*--text-small: min(calc(.3 * 1vw + 1rem), 1.54rem);*/
    --text-small: min(calc(.3 * 1vw + 1.2rem), 1.54rem);
    --text-smaller: min(calc(.3 * 1vw + 1rem), 1rem);
    
    --font-size-xl: 36px;
    --font-size-lg: 24px;
    --font-size-sm: 14px;
    
    --font-size-h1: clamp(3rem, calc(2rem + 4 * ((100vw - 23.4375rem) / 66.5625)), 6rem);
    --font-size-h2: clamp(2rem, calc(2rem + 1 * ((100vw - 23.4375rem) / 66.5625)), 3rem);
    
    --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);
    /*background: linear-gradient(135deg, light-dark(#f9f9ed, #232a2f), var(--background));*/
    /*background-attachment: fixed;*/
    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;
    }
}

.bg-card {
    background: var(--card);
}

.bg-card-alt {
    background: var(--card);
}

.bg-fade-in {
    background: linear-gradient(180deg, transparent, var(--fade));
    border-radius: var(--border-radius-lg);
}

.bg-fade-out {
    background: linear-gradient(360deg, transparent, var(--fade));
    border-radius: var(--border-radius-lg);
}

p.article-meta,
p.article-meta a {
    color: var(--muted) !important;
    font-family: var(--font-mono) !important;
    font-size: var(--font-size-sm) !important;
    text-align: center;
}

.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 {
        justify-content: center;
        padding-bottom: 0;
    }
}

kbd {
    background: var(--card);
    font-family: var(--font-system);
    font-size: var(--font-size-sm);
    text-align: center;
    color: var(--muted);
    border-radius: 4px;
    min-width: 28px;
    padding: 2px 8px;
    margin: 0 2px;
    display: inline-block;
}

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

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

.screenshot-selector {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.screenshot-option {
    width: 36px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted-color);
    cursor: pointer;
}

.screenshot-option:hover {
    color: var(--text-color);
}

.screenshot-option.active {
    background: var(--background-secondary);
    color: var(--text-color);
}

/*.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 {
    font-family: var(--font);
    color: light-dark(#2e93b0, #c6e5ff);
    font-weight: 900;
    text-decoration: none;
    
    font-size: 6rem;
    letter-spacing: -0.01em;
    line-height: 100%;
}

.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-rest {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    transform: translateX(-0.3em);
    overflow: hidden;

    transition:
        max-width 500ms cubic-bezier(.22, 1, .36, 1),
        opacity 300ms ease,
        transform 500ms cubic-bezier(.22, 1, .36, 1);

    animation: logo-intro 1900ms cubic-bezier(.22, 1, .36, 1);
}

.logo:hover .logo-rest {
    max-width: 1.2em;
    opacity: 1;
    transform: translateX(0);
}

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

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

.logo-dot {
    display: inline-block;
    display: inline-block;
    font-family: 'SF Mono';
    font-size: 120%;
    translate: -24%;
}

@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;
    }
}

/*.app-icon-wrapper {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}

img.app-icon {
    max-height: 120px;
    width: auto;
    border-radius: 32px;
    box-shadow: 0 14px 24px 0px var(--accent-muted);
    height:124px;
    align-self: center;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}

img.app-icon:hover {
    align-self: start;
    box-shadow: 0 14px 24px 0px var(--accent-muted);
}*/

.app-icon-wrapper {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

img.app-icon {
    height: 124px;
    width: auto;
    border-radius: 32px;
    box-shadow: 0 14px 24px 0 var(--fade);

    /*transition: transform 0.15s ease, box-shadow 0.15s ease;*/
}

/*img.app-icon:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 48px 0 var(--accent-muted);
}*/

.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);
    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);
}

.passed {
    color: #6bdd7d !important;
}

a {
    color: var(--text-color);
    text-decoration: none;
}

#roadmap a:not(.button),
#pricing a:not(.button) {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted;
}

a.no-color {
    color: inherit;
    
    i {
        font-size: var(--font-size-sm);
    }
}

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

.button-link {
    color: var(--accent);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
    
    i {
        font-size: var(--font-size-sm);
    }
}

.button-link:focus,
.button-link:hover {
    background: var(--accent-muted);
}

.mono a,
a.mono,
p.article-meta a {
    border-bottom: 1px dotted;
}

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

.image-clip {
    max-height: 320px;
    overflow: hidden;
}

.image-inline {
    img {
        border-radius: 0 !important;
        border: 1px solid var(--card);
    }
}

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;
    text-align: center;
    margin-bottom: 3rem;
}

.display-1,
.display-2,
.display-3,
.display-4 {
    font-family: var(--font);
    color: var(--text-color);
    letter-spacing: -0.025em;
    font-weight: 400;
    line-height: 1;
    font-size: var(--font-size-h2);
}

.display-1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    letter-spacing: -0.01em;
    /*line-height: 1;*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font);
    color: var(--text-color);
    letter-spacing: -0.025em;
    font-weight: 400;
    line-height: 1;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2) !important;
}

h3 {
    font-size: max(calc(var(--text-small) * 1.4), min(calc(1.25 * 1.2vw + .5rem), 2.75rem)) !important;
    font-style: normal;
    font-weight: 400;
    margin-top: 0;
    /*line-height: 1;*/
    color: var(--text-color);
    margin-bottom: 1rem;
}

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

.lead {
    font-size: var(--text-small);
    font-style: normal;
    font-weight: 400;
}

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

.feature-header {
    font-style: normal;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    
    i {
        color: var(--muted);
        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));
    font-style: normal;
    font-weight: 400;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.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;
}

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

.faq-text {
    color: color-mix(in srgb, light-dark(#111111, #f7f7f4) 80%, transparent);
}

.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: 1;
}

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

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

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

hr {
    display: none;
}

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

.lang-list .check-item {
    display: flex;
    justify-content: space-between;
    
    background: var(--card);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    
    &.unchecked {
        background: transparent !important;
    }
}

.card {
    color: var(--text-color);
    background: var(--card);
    border: none !important;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

#pricing .card {
    .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;*/
        background: var(--card);
        color: var(--text-color);
        /*border: 1px solid var(--card) !important;*/
        opacity: 1;
        box-shadow: none;
        
        transition: all 0.15s ease;
        -webkit-transition: all 0.15s ease;
    }
    
    .button-black:hover {
        opacity: .85;
        box-shadow: none;
        padding: 0.5rem 1.25rem;
    }
    
    .button-outline:hover {
        background: color-mix(in oklab, var(--card), var(--text-color) 5%);
        padding: 0.5rem 1.25rem;
    }
    
    
}

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

/*#pricing .card-alt {
    .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(--card) !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;
}

/*#pricing .card-outline {
    .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(--card) !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;
    }
}*/

.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: 100px;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
    
    i {
        font-size: 1.25rem;
    }
}

#pricing .button {
    border-radius: var(--border-radius-sm);
}

/* buttons */

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

.button-black:hover {
    opacity: .85;
    box-shadow: none;
    /*padding: 0.5rem 1.25rem;*/
}

/*@media (prefers-color-scheme: dark) {
    .button-black {
        font-weight: 400;
    }  
}*/

.button-sm {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    background: var(--card);
    color: var(--text_color) !important;
    font-size: var(--font-size-sm);
    
    height: auto;
    padding: 0.5rem 0.75rem;
    
    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: 10px;
    }
}

.button-sm:hover {
    opacity: .85;
}

/* cta button */
.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: var(--card);
    color: var(--text-color);
    opacity: 1;
    font-weight: 600;
    
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
}
.button-secondary:hover,
.button-secondary:focus {
    /*opacity: 0.6;*/
    background: color-mix(in oklab, var(--card), var(--text-color) 5%);
}

.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 {
    color: var(--text-color);
}

.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: light-dark(rgba(17,17,17,.05), rgba(247,247,244,.05));
    border-radius: 999px;
    backdrop-filter: blur(20px);
}

.floating-menu a,
.floating-menu .lead {
    color: var(--text-color);
    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 svg {
        height: 1rem;
    }
}

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

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

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

@media (max-width: 1200px) {
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .use-case-grid {
        grid-template-columns: 1fr;
    }
    .blog-blog-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .features-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);
    padding: 0 0.3rem;
}

.highlight {
    color: var(--accent);
    text-decoration: none;
    
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    
    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-more);
}

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

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

.fake-title-bar,
.fake-status-bar {
    font-family: var(--font-mono);
    padding: 4px 4px;
    font-size: 11px;
    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;*/
    font-family: var(--font-system);
    font-size: 12px;

    img {
        height: 18px;
        opacity: 100%;
    }
}

.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-title-bar {
    cursor: grab;
    user-select: none;
}

.fake-title-bar:active {
    cursor: grabbing;
}*/

.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: 21px;
    position: absolute;
    margin-top: -3px;
    margin-left: 0px;
}

.theme-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 10;

    width: 2rem;
    height: 2rem;
    padding: 0;

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

    border: 0;
    border-radius: var(--border-radius-sm);
    /*background: rgba(0,0,0,0.25);*/
    background: light-dark(rgba(17,17,17,.05), rgba(247,247,244,.05));
    backdrop-filter: blur(20px);

    color: white;
    cursor: pointer;
}

.theme-toggle:hover {
    opacity: 0.75;
}

.editor-preview {
    /* koi-mono */
    --background: #ffffff;
    --text_color: #5d5d5d;
    --cursor: #2e93b0;
    --keyword: #111111;
    --class: #111111;
    --name: #292929;
    --string: #787878;
    --number: #292929;
    --constant: #292929;
    --operator: #292929;
    --type: #787878;
    --special: #2e93b0;
    --builtin: #5D5D5D;
    --comment: #9E9E9E;
    --link: #787878;
    
    .traffic-light.close,
    .traffic-light.minimize,
    .traffic-light.fullscreen {
        background: color-mix(in srgb, var(--text_color) 30%, transparent);
    }
    
    display: flex;
    flex-direction: column;
    background: var(--background);
    border-radius: 9px;
    position: relative;
    border: 1px solid var(--gray-dark);
    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(--comment);
    }
    .gutter.current-row {
        color: var(--text_color);
        background: color-mix(in srgb, var(--text_color) 5%, transparent);
    }
    .gutter.inactive-row {
        background: color-mix(in srgb, var(--text_color) 5%, transparent);
    }
    
    .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;
    }
    
    .fake-status-bar .inactive {
        color: var(--text_color);
        opacity: 0.5;
    }
    
    .fake-status-bar .active {
        color: var(--text_color);
        opacity: 1;
    }
    
    .editor-divider {
        background: var(--text_color);
        opacity: 0.1;
    }
    .editor-divider:hover {
        opacity: 0.2;
    }
    
    .block-cursor {
        background: var(--cursor);
    }
}

.editor-preview.theme-dark {
    --background: #232a2f;
    --text_color: #f7f7f4;
    --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(--comment);
    }
    .gutter.current-row {
        color: var(--text_color);
        background: color-mix(in srgb, var(--text_color) 5%, transparent);
    }
    .gutter.inactive-row {
        background: color-mix(in srgb, var(--text_color) 5%, transparent);
    }
    
    .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;
    }
    
    .fake-status-bar .inactive {
        color: var(--text_color);
        opacity: 0.3;
    }
    
    .fake-status-bar .active {
        color: var(--text_color);
        opacity: 0.8;
    }
    
    .editor-divider {
        background: var(--text_color);
        opacity: 0.1;
    }
    .editor-divider:hover {
        opacity: 0.2;
    }
    
    .block-cursor {
        background: var(--cursor);
    }
}

.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: 50%;
    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;
}

@media (max-width: 768px) {
    .editor-split {
        --split-pos: 100%;
        /*grid-template-columns: minmax(0, 1fr);*/
        grid-template-columns: minmax(0, 100%);
    }

    .editor-pane-right,
    .splitter {
        display: none;
    }
    
    .editor-pane-left {
        width: 100%;
        min-width: 0;
    }
}

.editor-pane {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

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

.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;
    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;*/
    width: 9ch;
    padding-left: 1ch;
    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;
    max-height: 240px;
}

.media-expand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: .85;
    /*border-radius: calc(var(--border-radius-lg) - 0.25rem);*/ /* p-1 */
}

.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);
}

/* button should visibly click/change */
.theme-switching .theme-button {
    animation: button-pulse 420ms 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 {
    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);
}*/

/*.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;
}*/

/*.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, .heading-link) {
    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 {
    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(17,17,17,0.1), rgba(247,247,244,0.1));
    border: 0;
    border-top: 1px solid;
    opacity: 1;
}

.use-case-content blockquote {
    margin: 3rem 0;
    padding: 1.5rem;
    border: 1px solid light-dark(rgba(17,17,17,0.1), rgba(247,247,244,0.1));
    border-radius: var(--border-radius);
}

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

/* code blocks */
.use-case-content pre {
    margin: 1.35rem 0;
    padding: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--card);
    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;*/
    margin: 0 0 1.35rem;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    padding: 0;
    background: var(--card);
    /*border-radius: var(--border-radius);*/
    table-layout: fixed;
}

.use-case-content th,
.use-case-content td {
    padding: 1rem 1.35rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid light-dark(rgba(17,17,17,0.05), rgba(247,247,244,0.05));
    font-family: var(--font-system);
    font-size: var(--font-size);
    line-height: 1.5;
    
    border-right: 1px solid light-dark(rgba(17,17,17,0.05), rgba(247,247,244,0.05));
    
    span.accent {
        color: var(--accent);
    }
}

.use-case-content table.compact th,
.use-case-content table.compact td {
    font-size: var(--font-size-sm) !important;
}

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

.use-case-content th:last-child,
.use-case-content td:last-child {
    border-right: 0;
}

/*.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;
    font-size: var(--font-size-sm);
}

.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 (max-width: 768px) {
    .use-case-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .use-case-content pre {
        border-radius: var(--border-radius);
    }
}

.heading-link {
    color: inherit;
    text-decoration: none;
}

/* Documentation pages */

body.docs-page hr {
    display: none;
}

body.docs-page .docs-sidebar {
    height: auto;
    position: sticky;
    top: 0;
    overflow-y: auto;
    margin-top: 0;
}

@media (min-width: 992px) {
    body.docs-page .docs-sidebar {
        height: 100vh;
        margin-top: 3rem;
        padding-bottom: 6rem;
    }
}

.blog-entry {
    border-bottom: 1px solid var(--card);
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* koi logo */

/*.koi-logo {
    width: 220px;
    height: auto;
    fill: currentColor;
}

.koi-logo path {
    transform-box: fill-box;
    transform-origin: center;
}

.koi-k   { animation-delay: 0s; }
.koi-o   { animation-delay: .1s; }
.koi-i   { animation-delay: .2s; }
.koi-dot { animation-delay: .3s; }*/

/* navbar */

.nav-item {
    color: var(--text-color);
}

.nav-link,
.nav-link:focus {
    display: block;
    font-size: var(--font-size-sm);
    padding: 1rem;
    color: inherit;
    background: transparent;
    border: 0;
    font-weight: 400;
}

/*.nav-link:focus,*/
.nav-link:hover {
    color: inherit;
    opacity: .75;
}

.nav-link.brand {
    font-size: var(--font-size-lg);
    font-weight: 900;    
}

.navbar {
    position: sticky;
}

.mega-menu {
    background: var(--background);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}