@24vlh/vds 0.1.0 → 0.1.1

package/dist/core.css

@@ -1,866 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Primitives Layer
- *
- *  Responsibilities:
- *    - Define the neutral design tokens: typography, spacing,
- *      radii, borders, shadows, layout widths, icons, motion,
- *      easing, z-index, and accessibility foundations
- *    - Provide the root variable system used by all themes,
- *      components, utilities, and layout layers
- *    - Establish consistent scales, ratios, and naming patterns
- *      that remain invariant across themes and contexts
- *
- *  System Notes:
- *    - Pure token layer; declares no rendering rules
- *    - MUST load before base.css, layout.css, utilities, components, and all themes
- *    - Breakpoints listed are reference-only and should be used
- *      by higher layers via min-width media queries
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. ROOT TOKEN ARCHITECTURE (Neutral Layer)
---------------------------------------------------------- */
-
-:root {
-
-    /* -----------------------------------------------------
-       TYPOGRAPHY - Families, Scale, Line Heights, Weights
-    ----------------------------------------------------- */
-    --font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    --font-family-mono: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-    --text-xxxs: 0.65rem;
-    --text-xxs: 0.75rem;
-    --text-xs: 0.8125rem;
-    --text-sm: 0.875rem;
-    --text-base: 1rem;
-    --text-md: 1.0625rem;
-    --text-lg: 1.125rem;
-    --text-xl: 1.25rem;
-    --text-2xl: 1.5rem;
-    --text-3xl: 1.875rem;
-    --text-4xl: 2.25rem;
-    --text-5xl: 3.25rem;
-
-    --line-height-xs-tight: 0.5;
-    --line-height-tight: 1.1;
-    --line-height-xl-tight: 1.2;
-    --line-height-snug: 1.25;
-    --line-height-normal: 1.5;
-    --line-height-relaxed: 1.7;
-
-    --font-weight-regular: 400;
-    --font-weight-medium: 500;
-    --font-weight-semibold: 600;
-    --font-weight-bold: 700;
-
-    --letter-tight: -0.015em;
-    --letter-normal: 0;
-    --letter-loose: 0.015em;
-
-    --footnote-font-size: var(--text-xs);
-
-    /* -----------------------------------------------------
-       SPACING SYSTEM - Space, Gap, Padding, Component Rhythm
-    ----------------------------------------------------- */
-    --space-0: 0;
-    --space-0_5: 0.125rem;
-    --space-1: 0.25rem;
-    --space-1_5: 0.375rem;
-    --space-2: 0.5rem;
-    --space-2_5: 0.625rem;
-    --space-3: 0.75rem;
-    --space-3_5: 0.875rem;
-    --space-4: 1rem;
-    --space-5: 1.25rem;
-    --space-5_5: 1.3125rem;
-    --space-6: 1.5rem;
-    --space-7: 1.75rem;
-    --space-8: 2rem;
-    --space-10: 2.5rem;
-    --space-12: 3rem;
-    --space-14: 3.5rem;
-    --space-16: 4rem;
-    --space-20: 5rem;
-    --space-24: 6rem;
-    --space-28: 7rem;
-    --space-32: 8rem;
-    --space-36: 9rem;
-    --space-40: 10rem;
-    --space-44: 11rem;
-    --space-48: 12rem;
-    --space-64: 16rem;
-
-    --section-spacing-xs: var(--space-6);
-    --section-spacing-sm: var(--space-8);
-    --section-spacing-md: var(--space-12);
-    --section-spacing-lg: var(--space-16);
-    --section-spacing-xl: var(--space-20);
-
-    --gap-xs: var(--space-2);
-    --gap-sm: var(--space-3);
-    --gap-md: var(--space-6);
-    --gap-lg: var(--space-8);
-    --gap-xl: var(--space-12);
-
-    --component-gap-xs: var(--space-2);
-    --component-gap-sm: var(--space-3);
-    --component-gap-md: var(--space-4);
-    --component-gap-lg: var(--space-6);
-    --component-gap-xl: var(--space-10);
-
-    /* -----------------------------------------------------
-       RADII, BORDERS, SHADOWS
-    ----------------------------------------------------- */
-    --radius-none: 0;
-    --radius-xs: 2px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 18px;
-    --radius-full: 999px;
-    --radius-pill: 9999px;
-
-    --border-width: 1px;
-    --border-width-strong: 3px;
-    --tab-indicator-height: 2px;
-
-    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
-    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
-
-    /* -----------------------------------------------------
-       LAYOUT - Widths, Containers, Structure
-    ----------------------------------------------------- */
-    --layout-max-width: 80rem;
-
-    --content-width-sm: 640px;
-    --content-width-md: 768px;
-    --content-width-lg: 1024px;
-    --content-width-xl: 1200px;
-    --content-width-2xl: 1440px;
-
-    --sidebar-width-md: 280px;
-
-    --grid-min: 16rem;
-
-    /* -----------------------------------------------------
-       ICONS & AVATARS
-    ----------------------------------------------------- */
-    --icon-xxs: 1rem;
-    --icon-xs: 1.15rem;
-    --icon-sm: 1.25rem;
-    --icon-md: 1.35rem;
-    --icon-lg: 1.75rem;
-    --icon-xl: 2.25rem;
-
-    --icon-container-sm: 1.75rem;
-    --icon-container-md: 2.25rem;
-    --icon-container-lg: 3rem;
-    --icon-container-xl: 3.75rem;
-
-    --icon-stroke-thin: 1.25;
-    --icon-stroke-regular: 1.75;
-    --icon-stroke-bold: 2.25;
-
-    --avatar-size-sm: var(--space-7);
-    --avatar-size-md: var(--space-10);
-    --avatar-size-lg: var(--space-16);
-    --avatar-status-size: var(--space-2);
-
-    /* -----------------------------------------------------
-       MOTION / TRANSITIONS / EASING
-    ----------------------------------------------------- */
-    --transition-fast: 120ms ease-out;
-    --transition-normal: 180ms ease-out;
-    --transition-slow: 260ms ease-out;
-
-    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-    --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
-    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-
-    --motion-none: 0ms;
-
-    /* -----------------------------------------------------
-       Z-INDEX STACK
-    ----------------------------------------------------- */
-    --z-negative: -1;
-    --z-base: 0;
-    --z-header: 10;
-    --z-backdrop: 80;
-    --z-modal: 90;
-    --z-drawer: 95;
-    --z-toast: 100;
-    --z-tooltip: 110;
-
-    --z-sticky: 40;
-    --z-sticky-col: 39;
-
-    /* -----------------------------------------------------
-       ACCESSIBILITY / FOCUS / SELECTION
-    ----------------------------------------------------- */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-}
-
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Base Layer
- *
- *  Responsibilities:
- *    - Set global primitives: type scale, spacing, radii, motion,
- *      layout widths, and z-index hierarchy
- *    - Apply a modern reset / normalize across all HTML elements
- *    - Define structural layout primitives (page flex root, body flex)
- *    - Provide default link, list, table, and code behaviours
- *      consumed by all other VDS layers
- *
- *  System Notes:
- *    - Pure CSS: no JS assumptions or behavioural dependencies
- *    - Typography, layout utilities, and component styles live in
- *      their own modules and layer on top of this
- *    - Base must load before themes and before any component CSS
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. BASE TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-a {
-    --link-underline-thickness: 2px;
-}
-
-/* ---------------------------------------------------------
-   2. MODERN RESET / NORMALIZE
---------------------------------------------------------- */
-
-html {
-    box-sizing: border-box;
-    line-height: 1.5;
-    line-height: var(--line-height-normal);
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-feature-settings: "kern" 1, "liga" 1, "clig" 1, "calt" 1;
-}
-
-*, *::before, *::after {
-    box-sizing: inherit;
-    min-width: 0;
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-border-subtle) transparent;
-    -webkit-box-decoration-break: clone;
-            box-decoration-break: clone;
-}
-
-body {
-    margin: 0;
-    min-height: 100vh;
-    background: var(--color-bg);
-    color: var(--color-text);
-    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", sans-serif, sans-serif;
-    font-family: var(--font-family-sans), sans-serif;
-    font-size: 1rem;
-    font-size: var(--text-base);
-    text-rendering: optimizeLegibility;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-    display: block;
-    max-width: 100%;
-}
-
-img {
-    height: auto;
-}
-
-button,
-input,
-textarea,
-select {
-    font: inherit;
-    color: inherit;
-    margin: 0;
-}
-
-button {
-    border: none;
-    background: none;
-    padding: 0;
-}
-
-button,
-[role="button"],
-input[type="submit"],
-input[type="button"] {
-    cursor: pointer;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-input[type="search"] {
-    -webkit-appearance: none;
-    outline-offset: -2px;
-}
-
-textarea {
-    resize: vertical;
-}
-
-input,
-select,
-textarea {
-    line-height: inherit;
-}
-
-fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-
-legend {
-    padding: 0;
-}
-
-h1, h2, h3, h4, h5, h6,
-p,
-ul, ol,
-figure,
-blockquote,
-dl, dd {
-    margin: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    padding: 0;
-    color: inherit;
-}
-
-p,
-ul, ol,
-figure,
-blockquote {
-    padding: 0;
-}
-
-ul, ol {
-    padding-left: 1.5rem;
-    padding-left: var(--space-6);
-}
-
-ul ul,
-ul ol,
-ol ul,
-ol ol {
-    margin: 0;
-    padding-left: 1rem;
-    padding-left: var(--space-4);
-}
-
-b,
-strong {
-    font-weight: 700;
-    font-weight: var(--font-weight-bold);
-}
-
-hr {
-    margin: 1.5rem 0;
-    margin: var(--space-6) 0;
-    border: none;
-    border-top: 1px solid var(--color-border-subtle);
-    border-top: var(--border-width) solid var(--color-border-subtle);
-}
-
-a {
-    color: var(--link-text);
-    -webkit-text-decoration: none;
-    text-decoration: none;
-    transition: color 180ms ease-out;
-    transition: color var(--transition-normal);
-}
-
-a:hover {
-    color: var(--link-text-hover);
-    -webkit-text-decoration: underline;
-    text-decoration: underline;
-    -webkit-text-decoration-skip: ink;
-            text-decoration-skip-ink: auto;
-    text-decoration-thickness: 1px;
-    text-decoration-thickness: var(--link-underline-thickness, 1px);
-}
-
-a:active {
-    color: var(--link-text-active);
-}
-
-table {
-    border-collapse: collapse;
-    width: 100%;
-}
-
-:focus {
-    outline: 2px solid var(--focus-ring-color);
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: 2px;
-    outline-offset: var(--focus-ring-offset);
-}
-
-:focus:not(:focus-visible) {
-    outline: none;
-}
-
-:focus-visible {
-    outline: 2px solid var(--focus-ring-color);
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: 2px;
-    outline-offset: var(--focus-ring-offset);
-}
-
-::-moz-selection {
-    background: var(--color-selection-bg);
-    color: var(--color-selection-text);
-}
-
-::selection {
-    background: var(--color-selection-bg);
-    color: var(--color-selection-text);
-}
-
-@media (prefers-reduced-motion: reduce) {
-    :root {
-        --transition-fast: var(--motion-none);
-        --transition-normal: var(--motion-none);
-        --transition-slow: var(--motion-none);
-
-        --ease-out: linear;
-        --ease-in: linear;
-        --ease-in-out: linear;
-    }
-
-    * {
-        animation-duration: 0ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0ms !important;
-        scroll-behavior: auto !important;
-    }
-
-    html {
-        scroll-behavior: auto;
-    }
-}
-
-@media (forced-colors: active) {
-    * {
-        forced-color-adjust: none;
-    }
-}
-
-/* ---------------------------------------------------------
-   3. GLOBAL STRUCTURE
---------------------------------------------------------- */
-
-html,
-body {
-    width: 100%;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1 0 auto;
-}
-
-footer {
-    flex-shrink: 0;
-}
-
-/* ---------------------------------------------------------
-   4. CODE STYLES
---------------------------------------------------------- */
-
-code {
-    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
-    font-family: var(--font-family-mono), monospace;
-    font-size: 0.875em;
-}
-
-pre {
-    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
-    font-family: var(--font-family-mono), monospace;
-    font-size: 0.875em;
-    background: var(--code-bg);
-    color: var(--color-text);
-    border: 1px solid var(--code-border);
-    overflow: auto;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-
-pre, code {
-    -moz-tab-size: 4;
-      -o-tab-size: 4;
-         tab-size: 4;
-}
-
-kbd,
-samp {
-    font-family: "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, monospace;
-    font-family: var(--font-family-mono), monospace;
-}
-
-#root, /* React, Vite */
-#app, /* Vue, Svelte, Solid */
-#__next, /* Next.js */
-#__nuxt, /* Nuxt */
-app-root, /* Angular */
-svelte-root, /* Some Svelte starter kits */
-astro-root, /* Astro hybrid apps */
-[qwik-root], /* Qwik */
-.app-root, /* Generic container */
-[data-app-root], /* Custom micro-frontend root */
-[data-spa-root] /* Universal custom attribute */
-{
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    width: 100%;
-}
-
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Layout Layer
- *
- *  Responsibilities:
- *    - Provide the global page-frame architecture (header, content, footer)
- *    - Define reusable interior content regions for any block or module
- *    - Implement the container system (narrow, normal, wide, tight, relaxed)
- *    - Establish the page section vertical rhythm (XS–XL)
- *    - Supply structural grid layouts (auto-fit, 2/3/4 column)
- *    - Define high-level layouts: sidebar, right-sidebar, split, split-reverse
- *
- *  System Notes:
- *    - 100% token-driven: widths, gaps, section spacing, sidebar widths
- *    - Pure CSS; no JS positioning, no behavioural dependencies
- *    - Intended to sit above base.css and before content-blocks/components
- *    - Low-level spacing/flex utilities live in utilities.css, not here
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. PAGE FRAME SYSTEM  (single-instance)
---------------------------------------------------------- */
-
-header.page-header {
-    width: 100%;
-    position: relative;
-    z-index: 10;
-    z-index: var(--z-header);
-}
-
-main.page-content {
-    width: 100%;
-    flex: 1 0 auto;
-}
-
-footer.page-footer {
-    width: 100%;
-    position: relative;
-    z-index: 0;
-    z-index: var(--z-base);
-}
-
-/* ---------------------------------------------------------
-   2. CONTENT REGIONS (multi-instance, reusable)
---------------------------------------------------------- */
-
-.content-header {
-    width: 100%;
-}
-
-.content-body {
-    width: 100%;
-    flex: 1 1 auto;
-    min-height: 0;
-}
-
-.content-footer {
-    width: 100%;
-    flex-shrink: 0;
-}
-
-/* ---------------------------------------------------------
-   3. CONTAINER SYSTEM
---------------------------------------------------------- */
-
-.container {
-    width: 100%;
-    max-width: 1200px;
-    max-width: var(--content-width-xl);
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-}
-
-.container-wide {
-    width: 100%;
-    max-width: 1440px;
-    max-width: var(--content-width-2xl);
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-}
-
-.container-narrow {
-    width: 100%;
-    max-width: 1024px;
-    max-width: var(--content-width-lg);
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-}
-
-.container-tight {
-    width: 100%;
-    max-width: 768px;
-    max-width: var(--content-width-md);
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-}
-
-.container-relaxed {
-    width: 100%;
-    max-width: 90ch;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-left: var(--space-4);
-    padding-right: var(--space-4);
-}
-
-@media (max-width: 768px) {
-    .container,
-    .container-wide,
-    .container-narrow,
-    .container-tight,
-    .container-relaxed {
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
-        padding-left: var(--space-3);
-        padding-right: var(--space-3);
-    }
-}
-
-.full-bleed {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 0;
-    padding-right: 0;
-}
-
-.section-bleed {
-    margin-left: calc(-1 * 1rem);
-    margin-right: calc(-1 * 1rem);
-    margin-left: calc(-1 * var(--space-4));
-    margin-right: calc(-1 * var(--space-4));
-}
-
-@media (max-width: 768px) {
-    .section-bleed {
-        margin-left: calc(-1 * 0.75rem);
-        margin-right: calc(-1 * 0.75rem);
-        margin-left: calc(-1 * var(--space-3));
-        margin-right: calc(-1 * var(--space-3));
-    }
-}
-
-/* ---------------------------------------------------------
-   4. SECTION SPACING (vertical rhythm)
---------------------------------------------------------- */
-
-.section-none {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-
-.section-xs {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-    padding-top: var(--section-spacing-xs);
-    padding-bottom: var(--section-spacing-xs);
-}
-
-.section-sm {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-    padding-top: var(--section-spacing-sm);
-    padding-bottom: var(--section-spacing-sm);
-}
-
-.section {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-    padding-top: var(--section-spacing-md);
-    padding-bottom: var(--section-spacing-md);
-}
-
-.section-lg {
-    padding-top: 4rem;
-    padding-bottom: 4rem;
-    padding-top: var(--section-spacing-lg);
-    padding-bottom: var(--section-spacing-lg);
-}
-
-.section-xl {
-    padding-top: 5rem;
-    padding-bottom: 5rem;
-    padding-top: var(--section-spacing-xl);
-    padding-bottom: var(--section-spacing-xl);
-}
-
-/* ---------------------------------------------------------
-   5. STRUCTURAL GRID LAYOUTS
---------------------------------------------------------- */
-
-.layout-grid-auto {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
-    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-.layout-grid-2 {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-.layout-grid-3 {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-.layout-grid-4 {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-@media (max-width: 768px) {
-    .layout-grid-2,
-    .layout-grid-3,
-    .layout-grid-4 {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* ---------------------------------------------------------
-   6. HIGH-LEVEL SEMANTIC LAYOUTS
---------------------------------------------------------- */
-
-.sidebar-layout {
-    display: grid;
-    grid-template-columns: 280px 1fr;
-    grid-template-columns: var(--sidebar-width-md) 1fr;
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-.sidebar-layout-right {
-    display: grid;
-    grid-template-columns: 1fr 280px;
-    grid-template-columns: 1fr var(--sidebar-width-md);
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-@media (max-width: 1024px) {
-    .sidebar-layout,
-    .sidebar-layout-right {
-        grid-template-columns: 1fr;
-    }
-}
-
-.split {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-.split-reverse {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 2rem;
-    grid-gap: var(--gap-lg);
-    gap: 2rem;
-    gap: var(--gap-lg);
-}
-
-.split-reverse > *:first-child {
-    order: 2;
-}
-
-.split-reverse > *:last-child {
-    order: 1;
-}
-
-@media (max-width: 768px) {
-    .split,
-    .split-reverse {
-        grid-template-columns: 1fr;
-    }
-}
-
-@media (min-width: 769px) {
-    .split-reverse > * {
-        order: initial;
-    }
-}
+:root{--font-family-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-family-mono:"JetBrains Mono","SF Mono",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--text-xxxs:0.65rem;--text-xxs:0.75rem;--text-xs:0.8125rem;--text-sm:0.875rem;--text-base:1rem;--text-md:1.0625rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3.25rem;--line-height-xs-tight:0.5;--line-height-tight:1.1;--line-height-xl-tight:1.2;--line-height-snug:1.25;--line-height-normal:1.5;--line-height-relaxed:1.7;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--letter-tight:-0.015em;--letter-normal:0;--letter-loose:0.015em;--footnote-font-size:var(--text-xs);--space-0:0;--space-0_5:0.125rem;--space-1:0.25rem;--space-1_5:0.375rem;--space-2:0.5rem;--space-2_5:0.625rem;--space-3:0.75rem;--space-3_5:0.875rem;--space-4:1rem;--space-5:1.25rem;--space-5_5:1.3125rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-32:8rem;--space-36:9rem;--space-40:10rem;--space-44:11rem;--space-48:12rem;--space-64:16rem;--section-spacing-xs:var(--space-6);--section-spacing-sm:var(--space-8);--section-spacing-md:var(--space-12);--section-spacing-lg:var(--space-16);--section-spacing-xl:var(--space-20);--gap-xs:var(--space-2);--gap-sm:var(--space-3);--gap-md:var(--space-6);--gap-lg:var(--space-8);--gap-xl:var(--space-12);--component-gap-xs:var(--space-2);--component-gap-sm:var(--space-3);--component-gap-md:var(--space-4);--component-gap-lg:var(--space-6);--component-gap-xl:var(--space-10);--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:18px;--radius-full:999px;--radius-pill:9999px;--border-width:1px;--border-width-strong:3px;--tab-indicator-height:2px;--shadow-xs:0 1px 2px rgba(0,0,0,.05);--shadow-sm:0 1px 3px rgba(0,0,0,.1);--shadow-md:0 4px 6px rgba(0,0,0,.1);--shadow-lg:0 10px 15px rgba(0,0,0,.15);--shadow-xl:0 20px 25px rgba(0,0,0,.2);--layout-max-width:80rem;--content-width-sm:640px;--content-width-md:768px;--content-width-lg:1024px;--content-width-xl:1200px;--content-width-2xl:1440px;--sidebar-width-md:280px;--grid-min:16rem;--icon-xxs:1rem;--icon-xs:1.15rem;--icon-sm:1.25rem;--icon-md:1.35rem;--icon-lg:1.75rem;--icon-xl:2.25rem;--icon-container-sm:1.75rem;--icon-container-md:2.25rem;--icon-container-lg:3rem;--icon-container-xl:3.75rem;--icon-stroke-thin:1.25;--icon-stroke-regular:1.75;--icon-stroke-bold:2.25;--avatar-size-sm:var(--space-7);--avatar-size-md:var(--space-10);--avatar-size-lg:var(--space-16);--avatar-status-size:var(--space-2);--transition-fast:120ms ease-out;--transition-normal:180ms ease-out;--transition-slow:260ms ease-out;--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-in:cubic-bezier(0.32,0,0.67,0);--ease-in-out:cubic-bezier(0.65,0,0.35,1);--motion-none:0ms;--z-negative:-1;--z-base:0;--z-header:10;--z-backdrop:80;--z-modal:90;--z-drawer:95;--z-toast:100;--z-tooltip:110;--z-sticky:40;--z-sticky-col:39;--focus-ring-width:2px;--focus-ring-offset:2px}a{--link-underline-thickness:2px}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1,"liga" 1,"clig" 1,"calt" 1;box-sizing:border-box;line-height:1.5;line-height:var(--line-height-normal)}*,:after,:before{box-sizing:inherit;min-width:0}*{-webkit-box-decoration-break:clone;box-decoration-break:clone;scrollbar-color:var(--color-border-subtle) transparent;scrollbar-width:thin}body{background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont;font-family:var(--font-family-sans),sans-serif;font-size:1rem;font-size:var(--text-base);margin:0;min-height:100vh;text-rendering:optimizeLegibility}canvas,img,picture,svg,video{display:block;max-width:100%}img{height:auto}button,input,select,textarea{color:inherit;font:inherit;margin:0}button{background:none;border:none;padding:0}[role=button],button,input[type=button],input[type=submit]{cursor:pointer}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=search]{-webkit-appearance:none;outline-offset:-2px}textarea{resize:vertical}input,select,textarea{line-height:inherit}fieldset{border:0;margin:0}fieldset,legend{padding:0}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}h1,h2,h3,h4,h5,h6{color:inherit;padding:0}blockquote,figure,ol,p,ul{padding:0}ol,ul{padding-left:1.5rem;padding-left:var(--space-6)}ol ol,ol ul,ul ol,ul ul{margin:0;padding-left:1rem;padding-left:var(--space-4)}b,strong{font-weight:700;font-weight:var(--font-weight-bold)}hr{border:none;border-top:var(--border-width) solid var(--color-border-subtle);margin:1.5rem 0;margin:var(--space-6) 0}a{color:var(--link-text);-webkit-text-decoration:none;text-decoration:none;transition:color .18s ease-out;transition:color var(--transition-normal)}a:hover{-webkit-text-decoration-skip:ink;color:var(--link-text-hover);-webkit-text-decoration:underline;text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-thickness:1px;text-decoration-thickness:var(--link-underline-thickness,1px)}a:active{color:var(--link-text-active)}table{border-collapse:collapse;width:100%}:focus{outline:2px solid var(--focus-ring-color);outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:2px;outline-offset:var(--focus-ring-offset)}:focus:not(:focus-visible){outline:none}:focus-visible{outline:2px solid var(--focus-ring-color);outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:2px;outline-offset:var(--focus-ring-offset)}::-moz-selection{background:var(--color-selection-bg);color:var(--color-selection-text)}::selection{background:var(--color-selection-bg);color:var(--color-selection-text)}@media (prefers-reduced-motion:reduce){:root{--transition-fast:var(--motion-none);--transition-normal:var(--motion-none);--transition-slow:var(--motion-none);--ease-out:linear;--ease-in:linear;--ease-in-out:linear}*{animation-duration:0ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0ms!important}html{scroll-behavior:auto}}@media (forced-colors:active){*{forced-color-adjust:none}}body,html{width:100%}body{display:flex;flex-direction:column}main{flex:1 0 auto}footer{flex-shrink:0}code,pre{font-family:JetBrains Mono,SF Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace,monospace;font-family:var(--font-family-mono),monospace;font-size:.875em}pre{background:var(--code-bg);border:1px solid var(--code-border);color:var(--color-text);overflow:auto;white-space:pre-wrap;word-break:break-word}code,pre{-moz-tab-size:4;-o-tab-size:4;tab-size:4}kbd,samp{font-family:JetBrains Mono,SF Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace,monospace;font-family:var(--font-family-mono),monospace}#__next,#__nuxt,#app,#root,.app-root,[data-app-root],[data-spa-root],[qwik-root],app-root,astro-root,svelte-root{display:flex;flex-direction:column;min-height:100vh;width:100%}header.page-header{position:relative;width:100%;z-index:10;z-index:var(--z-header)}main.page-content{flex:1 0 auto;width:100%}footer.page-footer{position:relative;width:100%;z-index:0;z-index:var(--z-base)}.content-header{width:100%}.content-body{flex:1 1 auto;min-height:0;width:100%}.content-footer{flex-shrink:0;width:100%}.container{max-width:1200px;max-width:var(--content-width-xl)}.container,.container-wide{margin-left:auto;margin-right:auto;padding-left:1rem;padding-left:var(--space-4);padding-right:1rem;padding-right:var(--space-4);width:100%}.container-wide{max-width:1440px;max-width:var(--content-width-2xl)}.container-narrow{max-width:1024px;max-width:var(--content-width-lg)}.container-narrow,.container-tight{margin-left:auto;margin-right:auto;padding-left:1rem;padding-left:var(--space-4);padding-right:1rem;padding-right:var(--space-4);width:100%}.container-tight{max-width:768px;max-width:var(--content-width-md)}.container-relaxed{margin-left:auto;margin-right:auto;max-width:90ch;padding-left:1rem;padding-left:var(--space-4);padding-right:1rem;padding-right:var(--space-4);width:100%}@media (max-width:768px){.container,.container-narrow,.container-relaxed,.container-tight,.container-wide{padding-left:.75rem;padding-left:var(--space-3);padding-right:.75rem;padding-right:var(--space-3)}}.full-bleed{margin-left:0;margin-right:0;padding-left:0;padding-right:0;width:100%}.section-bleed{margin-left:-1rem;margin-left:calc(var(--space-4)*-1);margin-right:-1rem;margin-right:calc(var(--space-4)*-1)}@media (max-width:768px){.section-bleed{margin-left:-.75rem;margin-left:calc(var(--space-3)*-1);margin-right:-.75rem;margin-right:calc(var(--space-3)*-1)}}.section-none{padding-bottom:0;padding-top:0}.section-xs{padding-bottom:1.5rem;padding-bottom:var(--section-spacing-xs);padding-top:1.5rem;padding-top:var(--section-spacing-xs)}.section-sm{padding-bottom:2rem;padding-bottom:var(--section-spacing-sm);padding-top:2rem;padding-top:var(--section-spacing-sm)}.section{padding-bottom:3rem;padding-bottom:var(--section-spacing-md);padding-top:3rem;padding-top:var(--section-spacing-md)}.section-lg{padding-bottom:4rem;padding-bottom:var(--section-spacing-lg);padding-top:4rem;padding-top:var(--section-spacing-lg)}.section-xl{padding-bottom:5rem;padding-bottom:var(--section-spacing-xl);padding-top:5rem;padding-top:var(--section-spacing-xl)}.layout-grid-auto{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.layout-grid-2,.layout-grid-auto{display:grid;gap:2rem;gap:var(--gap-lg)}.layout-grid-2{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(2,1fr)}.layout-grid-3{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(3,1fr)}.layout-grid-3,.layout-grid-4{display:grid;gap:2rem;gap:var(--gap-lg)}.layout-grid-4{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:repeat(4,1fr)}@media (max-width:768px){.layout-grid-2,.layout-grid-3,.layout-grid-4{grid-template-columns:1fr}}.sidebar-layout{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:280px 1fr;grid-template-columns:var(--sidebar-width-md) 1fr}.sidebar-layout,.sidebar-layout-right{display:grid;gap:2rem;gap:var(--gap-lg)}.sidebar-layout-right{grid-gap:2rem;grid-gap:var(--gap-lg);grid-template-columns:1fr 280px;grid-template-columns:1fr var(--sidebar-width-md)}@media (max-width:1024px){.sidebar-layout,.sidebar-layout-right{grid-template-columns:1fr}}.split,.split-reverse{grid-gap:2rem;grid-gap:var(--gap-lg);display:grid;gap:2rem;gap:var(--gap-lg);grid-template-columns:1fr 1fr}.split-reverse>:first-child{order:2}.split-reverse>:last-child{order:1}@media (max-width:768px){.split,.split-reverse{grid-template-columns:1fr}}@media (min-width:769px){.split-reverse>*{order:0}}