[data-cs2-unfold-shell],
:root {
    --border-radius: 6px;
    --color-base-50: oklch(98.5% .002 247.839);
    --color-base-100: oklch(96.7% .003 264.542);
    --color-base-200: oklch(92.8% .006 264.531);
    --color-base-300: oklch(87.2% .01 258.338);
    --color-base-400: oklch(70.7% .022 261.325);
    --color-base-500: oklch(55.1% .027 264.364);
    --color-base-600: oklch(44.6% .03 256.802);
    --color-base-700: oklch(37.3% .034 259.733);
    --color-base-800: oklch(27.8% .033 256.848);
    --color-base-900: oklch(21% .034 264.665);
    --color-base-950: oklch(13% .028 261.692);
    --color-primary-50: oklch(97.7% .014 308.299);
    --color-primary-100: oklch(94.6% .033 307.174);
    --color-primary-200: oklch(90.2% .063 306.703);
    --color-primary-300: oklch(82.7% .119 306.383);
    --color-primary-400: oklch(71.4% .203 305.504);
    --color-primary-500: oklch(62.7% .265 303.9);
    --color-primary-600: oklch(55.8% .288 302.321);
    --color-primary-700: oklch(49.6% .265 301.924);
    --color-primary-800: oklch(43.8% .218 303.724);
    --color-primary-900: oklch(38.1% .176 304.987);
    --color-primary-950: oklch(29.1% .149 302.717);
    --color-font-subtle-light: var(--color-base-500);
    --color-font-subtle-dark: var(--color-base-400);
    --color-font-default-light: var(--color-base-600);
    --color-font-default-dark: var(--color-base-300);
    --color-font-important-light: var(--color-base-900);
    --color-font-important-dark: var(--color-base-100);
}

[x-cloak] {
    display: none !important;
}

.cs2-nav-link {
    align-items: center;
    border-radius: var(--border-radius, 6px);
    display: flex;
    font-weight: 500;
    gap: 0.75rem;
    margin-bottom: 0.125rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    transition: background-color 150ms ease, color 150ms ease;
}

.cs2-nav-link:hover {
    background: var(--color-base-100);
    color: var(--color-base-700);
}

.cs2-nav-link.active {
    background: var(--color-primary-600);
    color: white;
}

.dark .cs2-nav-link:hover {
    background: var(--color-base-800);
    color: var(--color-base-200);
}

.dark .cs2-nav-link.active {
    background: var(--color-primary-600);
    color: white;
}

.cs2-sidebar-nav {
    scrollbar-color: var(--color-base-300) transparent;
    scrollbar-width: thin;
}

.cs2-data-table th,
.cs2-data-table td {
    white-space: nowrap;
}

.cs2-data-cell {
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs2-code-block {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    max-width: 32rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 1023px) {
    .cs2-data-cell {
        max-width: 18rem;
    }
}