:root {
        --ui-font:
          "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --token-font: "Inter", monospace;
        --sidebar-width: 260px;
        --sidebar-collapsed-width: 80px;
        --topbar-height: 64px;
        /* Resolved from the Figma Semantic Tokens collection (Blue-Light). */
        --brand-primary: #3366ff;
        --brand-on-primary: #ffffff;
        --figma-brand-surface: #3366ff;
        --figma-button-solid: #0039e5;
        --figma-on-solid: #ffffff;
        --figma-text-primary: #000000;
        --figma-text-secondary: #4d4d4d;
        --figma-surface-background: #ffffff;
        --figma-surface-card-modal: #ededed;
        --figma-shadow-md: 0 8px 16px -4px rgba(0, 0, 0, 0.16);
        --core-brand: var(--brand-primary);
        --status-fg: var(--brand-on-primary);
        --active-radius: 14px;
      }
      [data-theme="light"] {
        --bg-main: #f4f5f7;
        --sidebar-glass: rgba(255, 255, 255, 0.5);
        --sidebar-border: rgba(255, 255, 255, 0.4);
        --sidebar-inner-highlight: rgba(255, 255, 255, 0.9);
        --surface: #ffffff;
        --surface-hover: #f2f2f2;
        --segment-track: #f9fafb;
        --text: #0f0f0f;
        --text-secondary: #4d4d4d;
        --text-muted: #606060;
        --border: #e5e5e5;
        --surface-pressed: rgba(0, 0, 0, 0.16);
      }
      [data-theme="dark"] {
        --bg-main: #050505;
        --sidebar-glass: rgba(30, 30, 30, 0.35);
        --sidebar-border: rgba(255, 255, 255, 0.08);
        --sidebar-inner-highlight: rgba(255, 255, 255, 0.05);
        --surface: #141414;
        --surface-hover: #272727;
        --segment-track: #212121;
        --text: #f1f1f1;
        --text-secondary: #999999 ;
        --text-muted: #aaaaaa;
        --border: #2e2e2e;
        --surface-pressed: rgba(255, 255, 255, 0.16);
        /* Resolved from the Figma Semantic Tokens collection (Blue-Dark). */
        --figma-brand-surface: #809fff;
        --figma-button-solid: #809fff;
        --figma-on-solid: #000000;
        --figma-text-primary: #e6e6e6;
        --figma-text-secondary: #999999;
        --figma-surface-background: #000000;
        --figma-surface-card-modal: #1a1a1a;
        --figma-shadow-md: 0 8px 16px -4px rgba(255, 255, 255, 0.08);
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html,
      body {
        background-color: var(--bg-main);
        color: var(--text);
        font-family: var(--ui-font);
        font-size: 16px;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        transition:
          background-color 0.3s,
          color 0.3s;
      }
      iconify-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        color: currentColor;
        min-width: 1.25em;
        min-height: 1.25em;
      }
      .app-layout {
        display: flex;
        height: 100vh;
        width: 100%;
        position: relative;
        background: var(--bg-main);
      }
      .sidebar {
        width: var(--sidebar-width);
        background: var(--sidebar-glass);
        backdrop-filter: blur(40px) saturate(200%);
        -webkit-backdrop-filter: blur(40px) saturate(200%);
        border: 1px solid var(--sidebar-border);
        border-radius: 20px;
        margin: 16px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px 12px;
        flex-shrink: 0;
        transition:
          width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.3s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 4px;
        box-shadow:
          0 8px 32px rgba(0, 0, 0, 0.06),
          inset 0 1px 1px var(--sidebar-inner-highlight);
      }
      .sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        margin-bottom: 24px;
        min-height: 48px;
      }
      .brand-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.125rem;
        font-weight: 400;
        color: var(--text-muted);
        white-space: nowrap;
        transition: opacity 0.2s;
      }
      .brand-title span {
        color: var(--text);
        font-weight: 600;
        letter-spacing: -0.02em;
      }
      .icon-btn {
        background: none;
        border: none;
        color: var(--text);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        border-radius: 50%;
        transition: background 0.2s ease;
        flex-shrink: 0;
      }
      .icon-btn:hover {
        background: var(--surface-hover);
      }
      .nav-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 12px 16px;
        margin-bottom: 4px;
        color: var(--text-muted);
        font-weight: 400;
        font-size: 0.95rem;
        line-height: 1.5;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        position: relative;
      }
      .nav-item:hover {
        background: var(--surface-hover);
        color: var(--text);
      }
      [data-theme="light"] .nav-item.active {
        background: rgba(255, 255, 255, 0.8);
        color: var(--brand-primary);
        font-weight: 500;
        box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.04),
          inset 0 1px 2px var(--sidebar-inner-highlight);
      }
      [data-theme="dark"] .nav-item.active {
        background: rgba(255, 255, 255, 0.1);
        color: var(--brand-primary);
        font-weight: 500;
        box-shadow:
          0 2px 10px rgba(0, 0, 0, 0.1),
          inset 0 1px 1px var(--sidebar-inner-highlight);
      }
      .nav-item.active:hover {
        color: var(--brand-primary);
      }
      .nav-item-icon-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
      }
      .nav-item iconify-icon {
        font-size: 1.35rem;
        font-weight: 300;
        transition: color 0.2s;
      }
      .nav-item.active iconify-icon {
        font-weight: 500;
        color: var(--brand-primary);
      }
      .sidebar.collapsed {
        width: var(--sidebar-collapsed-width) !important;
        min-width: var(--sidebar-collapsed-width);
        flex: 0 0 var(--sidebar-collapsed-width);
        padding: 16px 6px;
      }
      .sidebar.collapsed .brand-title {
        opacity: 0;
        pointer-events: none;
        position: absolute;
      }
      .sidebar.collapsed .sidebar-header {
        justify-content: center;
      }
      .sidebar.collapsed .nav-text {
        opacity: 0;
        display: none;
      }
      .sidebar.collapsed .nav-item {
        justify-content: center;
        padding: 12px 0;
      }
      .playground-preview {
        overflow: visible !important;
      }
      .playground-preview .component-stage {
        border-radius: 16px;
      }

      /* ====== NESTED SIDEBAR TREE CSS ====== */
      .sidebar .nav-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 4px;
      }
      .sidebar .nav-group-trigger {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 12px 16px;
        color: var(--text-muted);
        font-weight: 400;
        font-size: 0.95rem;
        line-height: 1.5;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        white-space: nowrap;
      }
      .sidebar .nav-group-trigger:hover {
        background: var(--surface-hover);
        color: var(--text);
      }
      .sidebar .nav-group-trigger .nav-item-icon-wrapper {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        font-size: 1.35rem;
        font-weight: 300;
        transition: color 0.2s;
      }

      .sidebar .group-chevron {
        margin-left: auto;
        transition: transform 0.2s ease;
        font-size: 1.1rem;
      }
      .sidebar .nav-group.expanded .group-chevron {
        transform: rotate(90deg);
      }

      .sidebar .sidebar-nested {
        display: none;
        flex-direction: column;
        gap: 2px;
        padding: 4px 12px;
        margin-bottom: 4px;
      }
      .sidebar .nav-group.expanded .sidebar-nested {
        display: flex;
      }

      .sidebar .sidebar-nested-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 10px;
        color: var(--text-muted);
        font-weight: 400;
        font-size: 0.9rem;
        line-height: 1.5;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        position: relative;
      }
      .sidebar .sidebar-nested-item:hover {
        background: var(--surface-hover);
        color: var(--text);
      }

      [data-theme="light"] .sidebar .sidebar-nested-item.active {
        background: rgba(255, 255, 255, 0.8);
        color: var(--brand-primary);
        font-weight: 500;
        box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.04),
          inset 0 1px 2px var(--sidebar-inner-highlight);
      }
      [data-theme="dark"] .sidebar .sidebar-nested-item.active {
        background: rgba(255, 255, 255, 0.1);
        color: var(--brand-primary);
        font-weight: 500;
        box-shadow:
          0 2px 10px rgba(0, 0, 0, 0.1),
          inset 0 1px 1px var(--sidebar-inner-highlight);
      }
      .sidebar .sidebar-nested-item.active:hover {
        color: var(--brand-primary);
      }

      .sidebar.collapsed .nav-group-trigger {
        padding: 12px 0;
        justify-content: center;
      }
      .sidebar.collapsed .group-chevron {
        display: none;
      }
      .sidebar.collapsed .sidebar-nested {
        display: none !important;
      }
      /* ===================================== */

      /* --- Advanced Control Panel Grouping UI (Collapsible) --- */
      .pg-group {
        display: flex;
        flex-direction: column;
        border-bottom: 6px solid var(--segment-track);
      }
      .pg-group:last-child {
        border-bottom: none;
      }
      .pg-group-header {
        display: flex;
        align-items: center;
        justify-content: space-between; /* Pushes the chevron to the right */
        padding: 0.85rem 1.25rem;
        background: var(--surface);
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        user-select: none;
      }
      .pg-group.nested-props .pg-group-header {
        background: var(--surface-hover);
      }
      .pg-group-chevron {
        color: var(--text-muted);
        font-size: 1.15rem;
        transition: transform 0.2s ease;
      }
      .pg-group.expanded .pg-group-chevron {
        transform: rotate(180deg);
      }
      .pg-group-body {
        background: var(--bg-main);
        display: none; /* Hidden by default */
      }
      .pg-group.expanded .pg-group-body {
        display: block; /* Visible when expanded class is active */
      }
      .pg-group-body .playground-control-row {
        padding: 0.75rem 1.25rem;
      }
      .pg-group-body .playground-control-row:nth-child(even) {
        background: rgba(128, 128, 128, 0.03);
      }

    /* ========================================= */
      /* "THUMBNAIL & CAPTION" GALLERY STYLE       */
      /* ========================================= */
      .bento-category-title { 
        font-size: 1.5rem; 
        font-weight: 600; 
        margin: 4rem 0 1.5rem 0; 
        padding-bottom: 0.75rem; 
        border-bottom: 1px solid var(--border); 
        color: var(--text); 
        letter-spacing: -0.02em; 
      }
      .bento-grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
        gap: 2.5rem 1.5rem; /* More vertical gap for the outside labels */
        margin-bottom: 2rem; 
      }
      
      /* The invisible wrapper holding the box and the text */
      .bento-item {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        cursor: pointer;
        text-decoration: none;
      }
      
      /* The actual preview box */
      .bento-preview-box { 
        height: 240px; 
        background-color: var(--surface); 
        border: 1px solid var(--border); 
        border-radius: 12px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        position: relative; 
        overflow: hidden; 
        pointer-events: none; 
        transition: border-color 0.3s ease, box-shadow 0.3s ease; 
      }
      
      /* Smooth Scaling Container */
      .bento-preview-inner { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        transform: scale(0.9); 
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
        width: 100%; 
        height: 100%;
      }
      
      /* Hover Effects */
      .bento-item:hover .bento-preview-box { 
        border-color: var(--text-muted); 
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); 
      }
      .bento-item:hover .bento-preview-inner { 
        transform: scale(0.95); 
      }

      /* Auto-Squish Massive Components so they fit in the thumbnail */
      .bento-preview-inner .ds-mdp-wrapper { transform: scale(0.45); }
      .bento-preview-inner .ds-idp-wrapper { transform: scale(0.7); }
      .bento-preview-inner .ds-file-uploader, .bento-preview-inner .ds-file-status { transform: scale(0.6); }
      .bento-preview-inner .ds-input-cta-block, .bento-preview-inner .ds-input-action-block { transform: scale(0.85); }
      .bento-preview-inner .ds-card { transform: scale(0.52); }
      .bento-preview-inner .ds-table-wrap { width: 840px; max-width: none; transform: scale(0.31); }
      .bento-preview-inner .ds-navigation-rail { transform: scale(0.24); }
      .bento-preview-inner .ds-context-menu { transform: scale(0.58); }
      .bento-preview-inner .ds-stepper { transform: scale(0.46); }
      .bento-preview-inner .ds-alert { transform: scale(0.34); }
      .bento-preview-inner .ds-modal { transform: scale(0.5); }
      .bento-preview-inner .ds-list { transform: scale(0.68); }
      
      /* The outside label */
      .bento-label { 
        font-size: 1.15rem; 
        font-weight: 600; 
        color: var(--text); 
        letter-spacing: -0.01em;
        transition: color 0.2s ease;
      }

      /* --- Iconography Gallery UI --- */
      .icon-gallery-shell {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: relative;
      }

      /* Smart Sticky Toolbar */
      .icon-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: wrap;
        background: var(--surface);
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        position: sticky;
        top: -2rem; /* Bypasses the 2rem padding of the scroll area */
        align-self: flex-start; /* CRITICAL: Fixes sticky bug inside flexbox */
        width: 100%;
        z-index: 100;
        transition:
          transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
          box-shadow 0.3s ease;
      }
      .icon-toolbar.is-sticky {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        border-color: var(--border);
      }
      .icon-toolbar.hidden-up {
        transform: translateY(-105%);
      }

      .icon-toolbar.show-up {
        transform: translateY(0);
      }

      .icon-search-wrap {
        flex: 1;
        min-width: 250px;
      }
      .icon-search-wrap .icon-search-field {
        width: 100%;
        --inpb-bg: var(--bg-main);
        --inpb-border-color: var(--border);
        --inpb-text: var(--text-muted);
        --inpb-shadow: none;
        --inpb-outline: none;
        --inpb-radius: 8px;
      }
      .icon-search-wrap .icon-search-field:hover {
        --inpb-bg: var(--surface-hover);
        --inpb-border-color: var(--text-muted);
      }
      .icon-search-wrap .icon-search-field:focus-within {
        --inpb-border-color: var(--button-border);
        --inpb-text: var(--text);
        --inpb-shadow: 0 0 0 3px var(--border);
      }
      .icon-search-wrap .icon-search-field[data-filled="true"] {
        --inpb-text: var(--text);
        --inpb-border-color: var(--button-border);
      }
      .icon-search-field .ds-input-block-icon {
        color: var(--text-muted);
      }
      .icon-search-field .ds-input-block-content {
        min-width: 0;
      }
      .ds-input-block-text {
        flex: 1;
        min-width: 0;
        width: 100%;
        background: transparent;
        border: none;
        outline: none;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.5;
      }

      .icon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
      }
      .icon-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.5rem 0.5rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        min-height: 110px;
      }
      .icon-card span {
        margin-top: 12px;
        font-size: 0.7rem;
        color: var(--text-muted);
        font-family: monospace;
        text-align: center;
        word-break: break-word;
        line-height: 1.2;
      }
      .icon-card:hover {
        border-color: var(--brand-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }
      .icon-card:hover .local-icon {
        transform: scale(1.15);
      }

      .copy-toast {
        position: absolute;
        inset: 0;
        background: var(--brand-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        opacity: 0;
        transition: opacity 0.2s;
        z-index: 10;
      }
      .icon-card.copied .copy-toast {
        opacity: 1;
      }

      /* Dynamic Scaling - Stroke scales inherently with the size! */
      .local-icon {
        display: inline-block;
        width: var(--gallery-icon-size, 24px);
        height: var(--gallery-icon-size, 24px);
        object-fit: contain;
        object-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        transition:
          transform 0.2s ease,
          width 0.3s ease,
          height 0.3s ease;
      }

      .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--surface);
        margin: 16px 16px 16px 0;
        border-radius: 16px;
        border: 1px solid var(--border);
        min-width: 0;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
        position: relative;
      }
      .top-nav {
        height: var(--topbar-height);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        padding: 0 1.5rem;
        justify-content: flex-end;
        background: var(--surface);
        z-index: 300;
        width: 100%;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
      .menu-toggle {
        margin-right: auto;
        display: none;
      }
      .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 900;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .config-bar {
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 1rem 2rem;
        gap: 1.5rem;
        flex-wrap: wrap;
        background: var(--surface);
        z-index: 100;
        width: 100%;
        min-width: 0;
      }
      .config-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        position: relative;
        min-width: 0;
        max-width: 100%;
      }
      .config-label {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        text-align: left;
      }
      .pill-segment {
        display: inline-flex;
        width: max-content;
        background: var(--segment-track);
        padding: 4px;
        border-radius: 999px;
        gap: 4px;
        border: 1px solid var(--border);
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .pill-segment::-webkit-scrollbar {
        display: none;
      }
      .pill-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: transparent;
        border: none;
        padding: 6px 14px;
        border-radius: 999px;
        font-family: var(--ui-font);
        font-size: 0.875rem;
        font-weight: 400;
        color: var(--text-muted);
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s ease;
      }
      .pill-btn iconify-icon {
        font-size: 1.125rem;
        opacity: 0.8;
      }
      .pill-btn:hover {
        color: var(--text);
      }
      .pill-btn.active,
      .playground-option.active {
        background: var(--text);
        /* Maps to dark background in Dark Mode to ensure high contrast against the white active fill */
        color: #000000; 
        box-shadow: none;
      }

      [data-theme="light"] .pill-btn.active,
      [data-theme="light"] .playground-option.active {
        /* Restores crisp white text against the black active fill in Light Mode */
        color: #ffffff; 
      }
      
      /* Optional: Adds a clean focus ring for keyboard navigation */
      .pill-btn:focus-visible,
      .playground-option:focus-visible {
        outline: 2px solid var(--text);
        outline-offset: 2px;
      }
      .pill-btn.active iconify-icon {
        opacity: 1;
      }
      .custom-select {
        position: relative;
        width: 100%;
        min-width: 180px;
        max-width: 250px;
      }
      .custom-select.disabled {
        opacity: 0.5;
        pointer-events: none;
      }
      .select-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--bg-main);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        height: 40px;
        transition: all 0.2s ease;
      }
      .select-trigger:hover {
        border-color: var(--text-muted);
      }
      .custom-select.open .select-trigger {
        border-color: var(--text-muted);
        box-shadow: 0 0 0 2px var(--surface-hover);
      }
      .select-value,
      .select-option {
        font-family: var(--ui-font);
        font-size: 0.875rem;
      }
      .select-value {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        font-weight: 400;
        color: var(--text);
        flex: 1;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .select-value iconify-icon {
        font-size: 1.125rem;
        color: var(--text);
        flex-shrink: 0;
      }
      .dropdown-arrow {
        font-size: 1.125rem;
        color: var(--text-muted);
        margin-left: auto;
        flex-shrink: 0;
      }
      .brand-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
        border: 1px solid var(--border);
      }
       .select-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        min-width: 100%;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        z-index: 400;
        display: none;
        flex-direction: column;
        padding: 0.5rem;
        max-height: 300px;
        overflow-y: auto;
      }
      .custom-select.open .select-dropdown {
        display: flex;
        animation: slideDown 0.15s ease-out;
      }

      /* HeroUI-style ColorPicker + ColorField composition */
      .heroui-color-picker {
        position: relative;
        width: min(320px, 100%);
      }
      .heroui-color-picker__trigger {
        appearance: none;
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        width: 100%;
        min-height: 42px;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        background: var(--bg-main);
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .heroui-color-picker__trigger:hover {
        border-color: var(--text-muted);
      }
      .heroui-color-picker__trigger:focus-visible,
      .heroui-color-field__input:focus-visible,
      .heroui-color-swatch-picker__item:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
      }
      .heroui-color-picker__swatch {
        width: 1.25rem;
        height: 1.25rem;
        flex: 0 0 auto;
        border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
        border-radius: 0.375rem;
        background: var(--swatch, #00d084);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
      }
      .heroui-color-picker__label {
        flex: 1 1 auto;
        font-size: 0.875rem;
        font-weight: 600;
      }
      .heroui-color-picker__value {
        margin-left: auto;
        color: var(--text-muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.75rem;
        text-transform: uppercase;
      }
      .heroui-color-picker__trigger iconify-icon {
        color: var(--text-muted);
        flex: 0 0 auto;
      }
      .heroui-color-picker__popover {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        z-index: 500;
        width: min(272px, calc(100vw - 2rem));
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: 1rem;
        background: var(--surface);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
      }
      .heroui-color-picker__popover[hidden] {
        display: none;
      }
      .heroui-color-picker__heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.75rem;
        font-size: 0.8rem;
        font-weight: 650;
      }
      .heroui-color-picker__heading output {
        color: var(--text-muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.75rem;
      }
      .heroui-color-editor-select,
      .heroui-color-space-select {
        display: grid;
        gap: 0.375rem;
        margin-bottom: 0.75rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 600;
      }
      .heroui-color-editor-select select,
      .heroui-color-space-select select {
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0.75rem;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        background: var(--surface-hover);
        color: var(--text);
        font: inherit;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .heroui-color-area {
        position: relative;
        width: 100%;
        max-width: 232px;
        aspect-ratio: 1;
        margin-bottom: 0.875rem;
        overflow: hidden;
        border: 3px solid var(--surface);
        border-radius: 1rem;
        background:
          linear-gradient(to top, #000, transparent),
          linear-gradient(to right, #fff, hsl(var(--hue, 154) 100% 50%));
        box-shadow: 0 0 0 1px var(--border), 0 8px 20px rgba(0, 0, 0, 0.16);
        cursor: crosshair;
        touch-action: none;
      }
      .heroui-color-area:focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
      }
      .heroui-color-area__thumb {
        position: absolute;
        left: var(--saturation, 100%);
        top: var(--brightness, 0%);
        width: 1rem;
        height: 1rem;
        border: 2px solid #fff;
        border-radius: 999px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
        transform: translate(-50%, -50%);
        pointer-events: none;
      }
      .heroui-color-slider {
        display: grid;
        grid-template-columns: 1fr auto auto;
        width: 100%;
        max-width: 232px;
        gap: 0.375rem 0.75rem;
        align-items: center;
        margin-bottom: 1rem;
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 600;
      }
      .heroui-color-slider output {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-weight: 500;
      }
      .heroui-color-slider__randomize {
        display: grid;
        place-items: center;
        width: 1.75rem;
        height: 1.75rem;
        margin: -0.25rem -0.25rem -0.25rem 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--text) 10%, transparent);
        color: var(--text);
        cursor: pointer;
      }
      .heroui-color-slider__randomize:hover {
        background: color-mix(in srgb, var(--text) 16%, transparent);
      }
      .heroui-color-slider input {
        grid-column: 1 / -1;
        width: 100%;
        height: 1.125rem;
        margin: 0;
        appearance: none;
        border: 3px solid var(--surface);
        border-radius: 999px;
        background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
        box-shadow: 0 0 0 1px var(--border);
        cursor: pointer;
      }
      .heroui-color-slider input::-webkit-slider-thumb {
        width: 1rem;
        height: 1rem;
        appearance: none;
        border: 2px solid #fff;
        border-radius: 999px;
        background: transparent;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
      }
      .heroui-color-slider input::-moz-range-thumb {
        width: 0.75rem;
        height: 0.75rem;
        border: 2px solid #fff;
        border-radius: 999px;
        background: transparent;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
      }
      .heroui-color-swatch-picker {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 0.375rem;
        margin-bottom: 1rem;
      }
      .heroui-color-swatch-picker__item {
        appearance: none;
        display: grid;
        place-items: center;
        width: 100%;
        aspect-ratio: 1;
        padding: 0.1875rem;
        border: 1px solid transparent;
        border-radius: 0.625rem;
        background: transparent;
        cursor: pointer;
      }
      .heroui-color-swatch-picker__item:hover,
      .heroui-color-swatch-picker__item[aria-pressed="true"] {
        border-color: var(--brand-primary);
        background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
      }
      .heroui-color-swatch-picker__item .heroui-color-picker__swatch {
        width: 100%;
        height: 100%;
      }
      .heroui-color-field {
        display: grid;
        gap: 0.5rem;
      }
      .heroui-color-field__label {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 600;
      }
      .heroui-color-field__group {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 0.25rem;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        background: var(--bg-main);
      }
      .heroui-color-field__prefix {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0 0.5rem;
        color: var(--text-muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      }
      .heroui-color-field__input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
        font: 0.875rem ui-monospace, SFMono-Regular, Menlo, monospace;
        text-transform: uppercase;
      }
      .heroui-color-field__input[aria-invalid="true"] {
        color: #ef4444;
      }
      .heroui-color-field__visual-control {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0.5rem;
        background: transparent;
        cursor: pointer;
      }
      .heroui-color-field__description {
        color: var(--text-muted);
        font-size: 0.75rem;
      }
      .heroui-color-channel-fields,
      .heroui-color-channel-sliders {
        width: 100%;
        max-width: 232px;
      }
      .heroui-color-channel-fields__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
      }
      .heroui-color-channel-fields__grid label {
        display: grid;
        gap: 0.25rem;
        padding: 0.5rem;
        border-radius: 0.75rem;
        background: var(--surface-hover);
        color: var(--text-muted);
        font-size: 0.7rem;
        text-align: center;
      }
      .heroui-color-channel-fields__grid input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
        font: 0.875rem ui-monospace, SFMono-Regular, Menlo, monospace;
        text-align: center;
      }
      .heroui-color-channel-slider {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
        margin-bottom: 0.5rem;
        color: var(--text);
        font-size: 0.75rem;
        font-weight: 600;
      }
      .heroui-color-channel-slider output {
        color: var(--text-muted);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-weight: 500;
      }
      .heroui-color-channel-slider input {
        grid-column: 1 / -1;
        width: 100%;
        height: 1.125rem;
        margin: 0;
        appearance: none;
        border: 3px solid var(--surface);
        border-radius: 999px;
        background: linear-gradient(to right, #fff, hsl(var(--slider-hue, 220) 100% 50%));
        box-shadow: 0 0 0 1px var(--border);
        cursor: pointer;
      }
      .heroui-color-channel-slider input::-webkit-slider-thumb {
        width: 1rem;
        height: 1rem;
        appearance: none;
        border: 2px solid #fff;
        border-radius: 999px;
        background: transparent;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
      }
      .heroui-color-channel-slider input::-moz-range-thumb {
        width: 0.75rem;
        height: 0.75rem;
        border: 2px solid #fff;
        border-radius: 999px;
        background: transparent;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
      }
      #custom-color-lightness {
        background: linear-gradient(to right, #000, hsl(var(--slider-hue, 220) 100% 50%), #fff);
      }
      #custom-color-alpha {
        background:
          linear-gradient(to right, transparent, hsl(var(--slider-hue, 220) 100% 50%)),
          conic-gradient(#c9c9c9 25%, #fff 0 50%, #c9c9c9 0 75%, #fff 0) 0 / 10px 10px;
      }

      /* The real HeroUI Popover is portalled to <body>, outside the config bar.
         Keep it above that bar and give every editor the same deliberate inset. */
      .syntrix-heroui-color-picker__popover {
        box-sizing: border-box !important;
        z-index: 1200 !important;
        width: min(304px, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
        max-height: min(680px, calc(100dvh - 1rem)) !important;
        padding: 1rem !important;
        gap: 0.75rem !important;
        border: 1px solid var(--border) !important;
        background: var(--surface) !important;
        color: var(--text) !important;
        align-items: stretch !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
      }
      /* Once a colour exists, its swatch and hex value are the trigger value.
         Keep the descriptive label available to assistive technology only. */
      .syntrix-heroui-color-picker__trigger [data-slot="label"] {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }
      /* Keep portalled menus visually attached to the control that opened them. */
      .syntrix-heroui-color-picker__popover[data-placement^="bottom"] {
        margin-top: 8px !important;
      }
      .syntrix-heroui-color-picker__popover[data-placement^="top"] {
        margin-bottom: 8px !important;
      }
      .syntrix-heroui-color-picker__popover .syntrix-heroui__area {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch;
      }
      .syntrix-heroui-color-picker__popover .select,
      .syntrix-heroui-color-picker__popover .select__trigger,
      .syntrix-heroui-color-picker__popover .syntrix-heroui__swatches {
        width: 100% !important;
      }
      .syntrix-heroui-color-picker__popover .color-slider,
      .syntrix-heroui-color-picker__popover .syntrix-heroui__slider-stack {
        min-width: 0;
      }
      .syntrix-heroui-color-picker__popover .color-slider__output {
        white-space: nowrap;
      }
      /* All picker fields share the requested 16px horizontal / 8px vertical rhythm. */
      .syntrix-heroui-color-picker__popover .syntrix-heroui__editor select,
      .syntrix-heroui-color-picker__popover .select__trigger {
        box-sizing: border-box !important;
        min-height: 40px !important;
        padding: 8px 16px !important;
      }
      .syntrix-heroui-color-picker__popover .syntrix-heroui__editor {
        width: 100% !important;
        min-width: 0 !important;
      }
      .syntrix-heroui-color-picker__popover .syntrix-heroui__editor select {
        display: block !important;
        width: 100% !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-color: var(--surface-hover) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23A3A3A3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-position: right 16px center !important;
        background-repeat: no-repeat !important;
        background-size: 16px 16px !important;
        padding: 8px 40px 8px 16px !important;
      }
      .syntrix-heroui-color-picker__popover .color-input-group {
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 40px !important;
      }
      .syntrix-heroui-color-picker__popover .color-input-group__input {
        padding: 8px 16px !important;
      }
      .syntrix-heroui-color-picker__popover .color-input-group:has([data-slot="color-input-group-prefix"]) .color-input-group__input {
        padding-inline-start: 8px !important;
      }
      .syntrix-heroui-color-picker__popover .color-input-group__prefix {
        margin-inline-start: 16px !important;
      }
      .syntrix-heroui-color-picker__popover .color-input-group__suffix {
        margin-inline-end: 16px !important;
      }
      .syntrix-heroui-color-picker__popover .select__indicator {
        position: relative !important;
        inset: auto !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        align-items: center !important;
        justify-content: center !important;
      }
      .syntrix-heroui-color-picker__popover .select__trigger:has(.select__indicator) {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding-inline-end: 16px !important;
      }
      .syntrix-heroui-color-picker__popover .select__value {
        flex: 1 1 0% !important;
        min-width: 0 !important;
      }
      /* The colour-space select is also portalled, so it needs its own stacking and offset. */
      .select__popover {
        z-index: 1201 !important;
      }
      .select__popover [data-slot="list-box"] {
        padding-block: 8px !important;
        padding-inline: 0 !important;
      }
      .select__popover [data-slot="list-box-item"] {
        box-sizing: border-box !important;
        min-height: 40px !important;
        padding: 8px 16px !important;
      }
      .select__popover[data-placement^="bottom"] {
        margin-top: 8px !important;
      }
      .select__popover[data-placement^="top"] {
        margin-bottom: 8px !important;
      }
      @media (max-width: 480px) {
        .syntrix-heroui-color-picker__popover {
          width: calc(100vw - 1rem) !important;
        }
      }
      @keyframes slideDown {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .select-option {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding: 0.6rem 0.75rem;
        border-radius: 6px;
        cursor: pointer;
        text-align: left;
        font-weight: 500;
        color: var(--text-muted);
        white-space: nowrap;
        transition:
          background 0.2s,
          color 0.2s;
      }
      .select-option iconify-icon {
        font-size: 1.125rem;
        color: var(--text-muted);
        transition: color 0.2s;
      }
      .select-option:hover {
        background: var(--surface-hover);
        color: var(--text);
      }
      .select-option:hover iconify-icon {
        color: var(--text);
      }
      .select-option.selected {
        color: var(--text);
        font-weight: 600;
        background: var(--surface-hover);
      }
      .select-option.selected iconify-icon {
        color: var(--text);
      }
      .custom-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 140px;
        height: 6px;
        background: var(--border);
        border-radius: 4px;
        outline: none;
        margin-top: 16px;
        transition: background 0.2s;
      }
      .custom-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--surface);
        border: 2px solid var(--text);
        cursor: pointer;
        transition: transform 0.1s;
      }
      .text-control {
        height: 40px;
        min-width: 180px;
        max-width: 250px;
        width: 100%;
        background: var(--bg-main);
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text);
        font-family: var(--ui-font);
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        outline: none;
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease;
      }
      .text-control:focus {
        border-color: var(--text-muted);
        box-shadow: 0 0 0 2px var(--surface-hover);
      }
      .toggle-row {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        height: 40px;
      }
      .toggle-control {
        position: relative;
        width: 44px;
        height: 24px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--segment-track);
        cursor: pointer;
        transition:
          background 0.2s ease,
          border-color 0.2s ease;
        appearance: none;
        -webkit-appearance: none;
        flex-shrink: 0;
      }
      .toggle-control::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--text-muted);
        transition:
          transform 0.2s ease,
          background 0.2s ease;
      }
      .toggle-control:checked {
        background: var(--brand-primary);
        border-color: var(--brand-primary);
      }
      .toggle-control:checked::after {
        transform: translateX(20px);
        background: #fff;
      }
      .toggle-copy {
        font-size: 0.875rem;
        color: var(--text);
        white-space: nowrap;
      }
      .doc-scroll-area {
        flex: 1;
        overflow-y: auto;
        padding: 2rem 3rem 6rem 3rem;
        scroll-behavior: smooth;
        position: relative;
        z-index: 50;
        width: 100%;
        min-width: 0;
      }
      .doc-container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        text-align: left;
      }
      section {
        display: none;
        animation: fadeIn 0.4s ease;
        text-align: left;
        padding-bottom: 2rem;
      }
      section.active {
        display: block;
      }
      .page-hero {
        padding: 1rem 0 2rem 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 2rem;
      }
      .page-title {
        font-size: 2.25rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.02em;
        margin-bottom: 0.5rem;
        color: var(--text);
      }
      .page-desc {
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--text-muted);
        max-width: 800px;
      }
      .code-badge {
        background: var(--surface-hover);
        padding: 4px 8px;
        border-radius: 6px;
        font-family: monospace;
        font-size: 0.8rem;
        color: var(--text);
        font-weight: 600;
        border: 1px solid var(--border);
      }
      .token-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 2.5rem 0;
        border-bottom: 1px solid var(--border);
        gap: 2rem;
      }
      .token-row.align-start {
        align-items: flex-start;
      }
      .token-row:last-child {
        border-bottom: none;
      }
      .token-left {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        text-align: left;
        min-width: 0;
        max-width: 100%;
      }
      .token-name {
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.5;
        color: var(--text);
        text-align: left;
      }
      .token-desc {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--text-muted);
        max-width: 90%;
        text-align: left;
      }
      .token-right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 3rem;
        flex-wrap: wrap;
      }
      .type-hero h1 {
        font-family: var(--token-font);
        font-size: 5rem;
        line-height: 1.1;
        letter-spacing: -0.04em;
        margin-bottom: 2rem;
        color: var(--text);
        text-align: left;
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
      }
      .type-hero .weights {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        font-size: 1.25rem;
        justify-content: flex-start;
        color: var(--text-muted);
        font-family: var(--ui-font);
        text-align: left;
      }
      .type-hero .weights span.active {
        color: var(--text);
      }
      .type-preview {
        font-family: var(--token-font);
        color: var(--text);
        text-align: left;
        max-width: 100%;
      }
      @media (min-width: 1101px) {
        .type-preview {
          white-space: nowrap;
        }
      }
      @media (max-width: 1100px) {
        .type-preview {
          white-space: normal;
          word-break: break-word;
          overflow-wrap: break-word;
        }
      }
      .type-props-grid {
        display: grid;
        grid-template-columns: 120px 100px 120px 150px;
        gap: 2rem;
        align-items: start;
        max-width: 100%;
      }
      .type-prop {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        text-align: left;
      }
      .prop-label {
        font-family: var(--ui-font);
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        text-align: left;
      }
      .prop-val {
        font-family: var(--ui-font);
        font-size: 1.125rem;
        font-weight: 500;
        color: var(--text);
        text-align: left;
      }
      .spacing-visual-container {
        width: 300px;
        max-width: 100%;
        display: flex;
        justify-content: flex-end;
      }
      .spacing-visual {
        height: 24px;
        background: var(--surface-hover);
        border: 1px dashed var(--text-muted);
        border-radius: 2px;
        transition: width 0.3s ease;
        max-width: 100%;
      }
      .spacing-val-label {
        font-family: var(--ui-font);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text);
        text-align: left;
        width: 48px;
      }
      .radius-visual-box {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-hover);
        border: 1px dashed var(--text-muted);
        transition: border-radius 0.3s ease;
      }
      .radius-val-label {
        font-family: var(--ui-font);
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text);
        text-align: center;
      }
      .doc-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow-x: auto;
        margin-top: 1rem;
        margin-bottom: 2rem;
        width: 100%;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        min-width: 600px;
      }
      th {
        font-family: var(--ui-font);
        background: var(--bg-main);
        font-weight: 500;
        font-size: 0.75rem;
        color: var(--text-muted);
        padding: 1rem 2rem 1rem 1rem;
        border-bottom: 1px solid var(--border);
        text-align: left;
        text-transform: uppercase;
      }
      td {
        font-family: var(--ui-font);
        padding: 1rem 2rem 1rem 1rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.875rem;
        color: var(--text);
        text-align: left;
      }
      tr:last-child td {
        border-bottom: none;
      }
      .color-category {
        margin-top: 2rem;
        margin-bottom: 3rem;
        text-align: left;
      }
      .category-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
        color: var(--text);
      }
      .color-family {
        margin-bottom: 2rem;
        text-align: left;
      }
      .family-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        margin-bottom: 1rem;
      }
      .swatch-bg {
        position: relative;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="%23e0e0e0" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/></svg>')
          center/10px 10px;
        overflow: hidden;
      }
      .swatch-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--swatch-color, transparent);
        pointer-events: none;
      }
      .swatch-fill {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .semantic-container {
        background: var(--bg-main);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 2rem;
        width: 100%;
      }
      .semantic-header {
        background: var(--surface-hover);
        padding: 12px 16px;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--text);
        border-bottom: 1px solid var(--border);
      }
      .semantic-row {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 2rem;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
      }
      .semantic-row:last-child {
        border-bottom: none;
      }
      .semantic-name {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: var(--text);
      }
      .semantic-name iconify-icon {
        color: var(--text-muted);
        font-size: 1rem;
      }
      .semantic-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--surface);
        border: 1px solid var(--border);
        padding: 4px 10px 4px 4px;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-muted);
        width: max-content;
      }
      .semantic-color-dot {
        width: 18px;
        height: 18px;
        border-radius: 4px;
        border: 1px solid var(--border);
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
      }
      .format-columns .color-category-inner {
        display: flex;
        gap: 2rem;
        overflow-x: auto;
        padding-bottom: 1rem;
        padding-right: 2rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
      }
      .format-columns .color-category-inner::-webkit-scrollbar {
        height: 8px;
        display: block;
      }
      .format-columns .color-category-inner::-webkit-scrollbar-track {
        background: var(--surface-hover);
        border-radius: 4px;
      }
      .format-columns .color-category-inner::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
      }
      .format-columns .color-family {
        width: 400px;
        min-width: 400px;
        max-width: 100%;
        flex: 0 0 auto;
        margin-bottom: 0;
        scroll-snap-align: start;
      }
      .format-columns .color-grid {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
      }
      .format-columns .color-swatch {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: row;
        height: auto;
        min-height: 50px;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-main);
        padding: 6px;
        gap: 12px;
      }
      .format-columns .swatch-bg {
        height: 38px;
        width: 38px;
        flex-shrink: 0;
        border: 1px solid var(--border);
        border-radius: 4px;
        overflow: hidden;
      }
      .format-columns .swatch-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-right: 0.5rem;
        gap: 12px;
      }
      .format-columns .swatch-name {
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--text);
        white-space: normal;
        line-height: 1.2;
        overflow-wrap: anywhere;
        word-break: normal;
      }
      .format-columns .swatch-value {
        font-size: 0.75rem;
        color: var(--text-muted);
        white-space: nowrap;
        line-height: 1.2;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
      }
      .format-cards .color-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
        gap: 32px;
        padding: 32px;
      }

      .format-cards .color-category-inner {
        display: block;
      }

      .format-cards .color-family {
        width: 100%;
        min-width: 0;
        margin-bottom: 2rem;
      }
      .format-cards .color-swatch {
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        transition: transform 0.2s;
        display: flex;
        flex-direction: column;
        min-height: 308px;
      }
      .format-cards .color-swatch:hover {
        transform: translateY(-2px);
      }
      .format-cards .swatch-bg {
        height: 150px;
        min-height: 150px;
        flex: 0 0 150px;
        width: 100%;
        border: 0;
        border-radius: 8px;
      }
      .format-cards .swatch-info {
        padding: 16px 0 0;
        min-height: 142px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: left;
      }
      .format-cards .swatch-name {
        font-weight: 600;
        font-size: 1rem;
        text-transform: capitalize;
        color: var(--text);
        white-space: normal;
        line-height: 1.2;
        word-break: break-word;
      }
      .format-cards .swatch-value {
        font-size: 0.875rem;
        color: var(--text-muted);
        white-space: normal;
        line-height: 1.2;
        word-break: break-word;
      }
      .swatch-contrast {
        display: none;
      }
      .format-cards .swatch-contrast {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: auto;
        color: var(--text-muted);
        font-size: 0.75rem;
        line-height: 1.25;
      }
      .format-cards .swatch-contrast strong {
        color: var(--text);
        font-size: 0.875rem;
        font-weight: 600;
      }
      .format-rows .color-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }
      .format-rows .color-swatch {
        display: flex;
        flex-direction: row;
        height: 60px;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-main);
        padding: 0.5rem;
        gap: 1.5rem;
      }
      .format-rows .color-swatch:hover {
        border-color: var(--text-muted);
      }
      .format-rows .swatch-bg {
        height: 100%;
        width: 64px;
        flex-shrink: 0;
        border: 1px solid var(--border);
        border-radius: 6px;
        overflow: hidden;
      }
      .format-rows .swatch-info {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-right: 1rem;
        overflow: hidden;
      }
      .format-rows .swatch-name {
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--text);
        white-space: normal;
        line-height: 1.2;
        word-break: break-word;
      }
      .format-rows .swatch-value {
        font-size: 0.875rem;
        color: var(--text-muted);
        white-space: normal;
        line-height: 1.2;
        word-break: break-word;
        flex-shrink: 0;
      }
      .format-ramp .color-category-inner {
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }
      .format-ramp .color-family {
        width: 100%;
      }
      .format-ramp .color-grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        align-items: start;
        width: 100%;
        overflow-x: hidden;
        gap: 8px;
        padding-bottom: 16px;
        padding-top: 4px;
        scrollbar-width: thin;
        background: transparent;
        -webkit-overflow-scrolling: touch;
      }
      .format-ramp .color-grid::-webkit-scrollbar {
        height: 6px;
        display: block;
      }
      .format-ramp .color-grid::-webkit-scrollbar-track {
        background: transparent;
      }
      .format-ramp .color-grid::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
      }
      .format-ramp .color-swatch {
        display: flex;
        flex-direction: column;
        width: auto;
        min-width: 0;
        max-width: none;
        min-height: 0;
        flex: none;
        border: 0;
        border-radius: 8px;
        background: transparent;
        padding: 0;
        transition:
          transform 0.2s,
          box-shadow 0.2s,
          border-color 0.2s;
        overflow: hidden;
      }
      .format-ramp .swatch-bg {
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        width: 100%;
        aspect-ratio: 1 / 1;
        border: 0;
        border-radius: 8px !important;
        transition: transform 0.2s;
      }
      .format-ramp .swatch-info {
        padding: 0.625rem 0.25rem 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
      }
      .format-ramp .swatch-name {
        font-weight: 400;
        font-size: 0.8rem;
        color: var(--text);
        word-break: break-word;
        line-height: 1.2;
        transition: margin-bottom 0.2s ease;
      }
      .format-ramp .swatch-value {
        font-size: 0.7rem;
        color: var(--text-muted);
        word-break: break-word;
        line-height: 1.2;
        max-height: 40px;
        opacity: 1;
        overflow: hidden;
        transition:
          max-height 0.2s ease,
          opacity 0.2s ease;
      }
      .format-ramp .color-swatch:hover {
        transform: translateY(-2px);
        z-index: 10;
        box-shadow: none;
      }

      .format-ramp .color-swatch:first-child .swatch-bg {
        border-radius: 8px !important;
      }

      .format-ramp .color-swatch:last-child .swatch-bg {
        border-radius: 8px !important;
      }

      /* A compact screen may scroll the ramp; a desktop viewport always shows the full family. */
      @media (max-width: 760px) {
        .format-ramp .color-grid {
          overflow-x: auto;
          grid-auto-columns: 112px;
        }

        .format-ramp .color-swatch {
          width: 112px;
          min-width: 112px;
        }
      }
      .format-ramp .color-swatch:hover .swatch-name {
        margin-bottom: 4px;
      }
      .format-ramp .color-swatch:hover .swatch-value {
        max-height: 40px;
        opacity: 1;
      }

      /* Keep every colour presentation stable when its parent is a flex or grid item. */
      .format-cards .color-category-inner,
      .format-cards .color-family,
      .format-cards .color-grid,
      .format-rows .color-category-inner,
      .format-rows .color-family,
      .format-rows .color-grid,
      .format-ramp .color-category-inner,
      .format-ramp .color-family,
      .format-ramp .color-grid {
        width: 100%;
        min-width: 0;
      }

      .format-cards .color-swatch {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .format-cards .swatch-bg,
      .format-cards .swatch-info {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .format-cards .swatch-name {
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .format-cards .swatch-value {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }

      .format-rows .color-swatch {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .format-rows .swatch-info,
      .format-rows .swatch-name {
        min-width: 0;
      }

      .format-rows .swatch-name {
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .format-rows .swatch-value {
        max-width: 58%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }

      .format-ramp .color-swatch {
        box-sizing: border-box;
      }

      .format-ramp .swatch-bg,
      .format-ramp .swatch-info,
      .format-ramp .swatch-name,
      .format-ramp .swatch-value {
        min-width: 0;
      }

      .format-ramp .swatch-name {
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .format-ramp .swatch-value {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: normal;
      }
      .effect-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 1rem;
      }
      .effect-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 2.5rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        transition:
          transform 0.2s,
          border-color 0.2s;
      }
      .effect-card:hover {
        transform: translateY(-4px);
        border-color: var(--brand-primary);
      }
      .effect-preview-box {
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .effect-info {
        text-align: center;
        width: 100%;
      }
      .effect-name {
        font-weight: 500;
        font-size: 0.95rem;
        color: var(--text);
        margin-bottom: 0.25rem;
        text-transform: capitalize;
      }
      .effect-value {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 6px;
      }
      .effect-badge {
        background: var(--surface-hover);
        border: 1px solid var(--border);
        padding: 3px 6px;
        border-radius: 6px;
        font-family: monospace;
        font-size: 0.75rem;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        line-height: 1;
      }
      .effect-badge span {
        color: var(--text);
        font-weight: 600;
      }

      /* ========================================= */
      /* Segment Control Component Styling         */
      /* ========================================= */
      .ds-segment-control {
        display: inline-flex;
        align-items: center;
        padding: 4px;
        background-color: var(--seg-bg);
        border: 1px solid var(--seg-border);
        border-radius: 999px;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 100%; /* Prevents breaking out of the container on mobile */
      }
      .ds-segment-control::-webkit-scrollbar { display: none; }
      
      .ds-segment-btn {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: transparent;
        color: var(--seg-text);
        border: 1.5px solid transparent; /* Transparent border prevents layout shift */
        border-radius: 999px;
        font-family: var(--ui-font);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
      }
      
      .ds-segment-btn.active {
        background-color: var(--seg-active-bg);
        color: var(--seg-active-text);
      }
      
      /* The distinct focus/hover ring from your screenshot */
      .ds-segment-btn:not(.active):hover,
      .ds-segment-btn.simulated-hover {
        color: var(--seg-active-text);
        border-color: var(--seg-hover-ring);
      }
      
      .ds-segment-control[data-size="Large"] .ds-segment-btn { height: 40px; padding: 0 16px; font-size: 14px; }
      .ds-segment-control[data-size="Medium"] .ds-segment-btn { height: 34px; padding: 0 14px; font-size: 14px; }
      .ds-segment-control[data-size="Small"] .ds-segment-btn { height: 28px; padding: 0 10px; font-size: 12px; }

      /* Component Sandbox Base */
      .button-doc-grid {
        display: grid;
        grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
        gap: 2rem;
        align-items: stretch;
      }
      .button-preview-panel,
      .button-spec-panel {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-main);
        padding: 2rem;
        min-width: 0;
      }
      .button-stage {
        min-height: 260px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: var(--surface);
      }

      /* Standard Button Component */
      .ds-button {
        --button-bg: var(--brand-primary);
        --button-fg: #fff;
        --button-border: transparent;
        --button-source-shadow: rgba(255, 255, 255, 0.28);
        --button-surface-shadow: rgba(0, 0, 0, 0.28);
        appearance: none;
        border: 1px solid var(--button-border);
        background: var(--button-bg);
        color: var(--button-fg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--token-font);
        font-weight: 500;
        letter-spacing: 0;
        white-space: nowrap;
        border-radius: var(--active-radius, 14px);
        cursor: pointer;
        position: relative;
        transition:
          transform 0.15s ease,
          background 0.15s ease,
          border-color 0.15s ease,
          opacity 0.15s ease;
      }
      .ds-button[data-size="Large"] {
        min-height: 48px;
        padding: 12px 16px;
        font-size: 16px;
        line-height: 24px;
      }
      .ds-button[data-size="Medium"] {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 16px;
        line-height: 24px;
      }
      .ds-button[data-size="Small"] {
        min-height: 32px;
        padding: 6px 14px;
        font-size: 14px;
        line-height: 20px;
      }
      .ds-button[data-size="XSmall"] {
        min-height: 24px;
        padding: 3px 10px;
        font-size: 12px;
        line-height: 16px;
        gap: 6px;
      }
      .ds-button[data-shadow="True"] {
        box-shadow:
          inset 1px 1px 4px var(--button-source-shadow),
          inset -1px -1px 4px var(--button-surface-shadow);
      }
      .ds-button[data-state="Hover"] {
        transform: translateY(-1px);
      }
      .ds-button[data-state="Pressed"] {
        transform: translateY(1px);
      }
      .ds-button[data-state="Focus"] {
        outline: 2px solid var(--brand-primary);
        outline-offset: 3px;
      }
      .ds-button[data-state="Disabled"] {
        opacity: 0.48;
        cursor: not-allowed;
        transform: none;
      }
      .ds-button-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ds-button[data-size="Large"] .ds-button-icon {
        font-size: 24px;
        width: 24px;
        height: 24px;
      }
      .ds-button[data-size="Medium"] .ds-button-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
      }
      .ds-button[data-size="Small"] .ds-button-icon {
        font-size: 16px;
        width: 16px;
        height: 16px;
      }
      .ds-button[data-size="XSmall"] .ds-button-icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
      }

      /* Icon Button Component */
      .ds-icon-button {
        --button-bg: var(--brand-primary);
        --button-fg: #fff;
        --button-border: transparent;
        --button-source-shadow: rgba(255, 255, 255, 0.28);
        --button-surface-shadow: rgba(0, 0, 0, 0.28);
        appearance: none;
        border: 1px solid var(--button-border);
        background: var(--button-bg);
        color: var(--button-fg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        border-radius: var(--active-radius, 14px);
        cursor: pointer;
        position: relative;
        transition:
          transform 0.15s ease,
          background 0.15s ease,
          border-color 0.15s ease,
          opacity 0.15s ease;
      }
      .ds-icon-button[data-size="Large"] {
        width: 48px;
        height: 48px;
        font-size: 24px;
      }
      .ds-icon-button[data-size="Medium"] {
        width: 40px;
        height: 40px;
        font-size: 20px;
      }
      .ds-icon-button[data-size="Small"] {
        width: 32px;
        height: 32px;
        font-size: 16px;
      }
      .ds-icon-button[data-size="XSmall"] {
        width: 24px;
        height: 24px;
        font-size: 14px;
      }
      .ds-icon-button[data-shadow="True"] {
        box-shadow:
          inset 1px 1px 4px var(--button-source-shadow),
          inset -1px -1px 4px var(--button-surface-shadow);
      }
      .ds-icon-button[data-state="Hover"] {
        transform: translateY(-1px);
      }
      .ds-icon-button[data-state="Pressed"] {
        transform: translateY(1px);
      }
      .ds-icon-button[data-state="Focus"] {
        outline: 2px solid var(--brand-primary);
        outline-offset: 3px;
      }
      .ds-icon-button[data-state="Disabled"] {
        opacity: 0.48;
        cursor: not-allowed;
        transform: none;
      }
      .ds-icon-button iconify-icon {
        font-size: inherit;
      }

      /* Extended FAB Component */
      .ds-extended-fab {
        --fab-bg: var(--brand-primary);
        --fab-fg: #fff;
        --fab-border: transparent;
        --fab-source-shadow: rgba(255, 255, 255, 0.28);
        --fab-surface-shadow: rgba(0, 0, 0, 0.28);
        appearance: none;
        border: 1px solid var(--fab-border);
        background: var(--fab-bg);
        color: var(--fab-fg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-shrink: 0;
        border-radius: calc(var(--active-radius, 14px) * 1.25);
        cursor: pointer;
        position: relative;
        transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-family: var(--ui-font);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
      }
      .ds-extended-fab .ds-extended-fab-text {
        display: inline-block;
        max-width: 200px;
        opacity: 1;
        transition:
          max-width 0.3s cubic-bezier(0.2, 0, 0, 1),
          opacity 0.2s ease;
      }
      .ds-extended-fab[data-extended="False"] {
        gap: 0;
      }
      .ds-extended-fab[data-extended="False"] .ds-extended-fab-text {
        max-width: 0;
        opacity: 0;
      }
      .ds-extended-fab[data-extended="False"][data-size="Large"] {
        width: 72px;
        padding: 0;
      }
      .ds-extended-fab[data-extended="False"][data-size="Medium"] {
        width: 56px;
        padding: 0;
      }
      .ds-extended-fab[data-extended="False"][data-size="Small"] {
        width: 40px;
        padding: 0;
      }

      .ds-extended-fab[data-shadow="True"] {
        box-shadow:
          0 4px 12px rgba(0, 0, 0, 0.15),
          inset 1px 1px 4px var(--fab-source-shadow),
          inset -1px -1px 4px var(--fab-surface-shadow);
      }
      .ds-extended-fab[data-size="Large"] {
        height: 72px;
        padding: 0 32px;
        font-size: 20px;
        border-radius: calc(var(--active-radius, 14px) * 1.5);
      }
      .ds-extended-fab[data-size="Medium"] {
        height: 56px;
        padding: 0 24px;
        font-size: 16px;
      }
      .ds-extended-fab[data-size="Small"] {
        height: 40px;
        padding: 0 16px;
        font-size: 14px;
      }
      .ds-extended-fab[data-state="Hover"] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }
      .ds-extended-fab[data-state="Hover"][data-shadow="True"] {
        box-shadow:
          0 8px 16px rgba(0, 0, 0, 0.2),
          inset 1px 1px 4px var(--fab-source-shadow),
          inset -1px -1px 4px var(--fab-surface-shadow);
      }
      .ds-extended-fab[data-state="Pressed"] {
        transform: translateY(1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .ds-extended-fab[data-state="Pressed"][data-shadow="True"] {
        box-shadow:
          0 2px 4px rgba(0, 0, 0, 0.1),
          inset 1px 1px 4px var(--fab-source-shadow),
          inset -1px -1px 4px var(--fab-surface-shadow);
      }
      .ds-extended-fab[data-state="Focus"] {
        outline: 2px solid var(--brand-primary);
        outline-offset: 3px;
      }
      .ds-extended-fab[data-state="Disabled"] {
        opacity: 0.48;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
      .ds-extended-fab iconify-icon {
        font-size: 1.25em;
        flex-shrink: 0;
      }

      /* Standard FAB Component */
      .ds-fab {
        --fab-bg: var(--brand-primary);
        --fab-fg: #fff;
        --fab-border: transparent;
        --fab-source-shadow: rgba(255, 255, 255, 0.28);
        --fab-surface-shadow: rgba(0, 0, 0, 0.28);
        appearance: none;
        border: 1px solid var(--fab-border);
        background: var(--fab-bg);
        color: var(--fab-fg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0;
        border-radius: calc(var(--active-radius, 14px) * 1.25);
        cursor: pointer;
        position: relative;
        transition:
          transform 0.15s ease,
          background 0.15s ease,
          border-color 0.15s ease,
          box-shadow 0.15s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      .ds-fab[data-shadow="True"] {
        box-shadow:
          0 4px 12px rgba(0, 0, 0, 0.15),
          inset 1px 1px 4px var(--fab-source-shadow),
          inset -1px -1px 4px var(--fab-surface-shadow);
      }
      .ds-fab[data-size="Large"] {
        width: 72px;
        height: 72px;
        font-size: 32px;
        border-radius: calc(var(--active-radius, 14px) * 1.5);
      }
      .ds-fab[data-size="Medium"] {
        width: 56px;
        height: 56px;
        font-size: 24px;
      }
      .ds-fab[data-size="Small"] {
        width: 40px;
        height: 40px;
        font-size: 20px;
      }
      .ds-fab[data-state="Hover"] {
        transform: translateY(-2px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }
      .ds-fab[data-state="Hover"][data-shadow="True"] {
        box-shadow:
          0 8px 16px rgba(0, 0, 0, 0.2),
          inset 1px 1px 4px var(--fab-source-shadow),
          inset -1px -1px 4px var(--fab-surface-shadow);
      }
      .ds-fab[data-state="Pressed"] {
        transform: translateY(1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .ds-fab[data-state="Pressed"][data-shadow="True"] {
        box-shadow:
          0 2px 4px rgba(0, 0, 0, 0.1),
          inset 1px 1px 4px var(--fab-source-shadow),
          inset -1px -1px 4px var(--fab-surface-shadow);
      }
      .ds-fab[data-state="Focus"] {
        outline: 2px solid var(--brand-primary);
        outline-offset: 3px;
      }
      .ds-fab[data-state="Disabled"] {
        opacity: 0.48;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
      .ds-fab iconify-icon {
        font-size: inherit;
      }

      /* FAB Menu */
      .ds-fab-menu-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 16px;
        position: relative;
      }
      .ds-menu-segment-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        align-items: flex-end;
        animation: slideUpFab 0.2s cubic-bezier(0.2, 0, 0, 1);
        transform-origin: bottom right;
      }
      @keyframes slideUpFab {
        from {
          opacity: 0;
          transform: scale(0.9) translateY(10px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }

      .ds-menu-segment {
        background: var(--seg-def);
        color: var(--seg-fg);
        cursor: pointer;
        border: none;
        border-radius: 32px;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--ui-font);
        font-size: 16px;
        font-weight: 500;
        height: 56px;
        line-height: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition:
          background 0.2s,
          transform 0.1s,
          box-shadow 0.2s,
          outline 0.1s;
        white-space: nowrap;
      }
      .ds-menu-segment iconify-icon {
        font-size: 24px;
        transition: color 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .ds-menu-segment:hover {
        background: var(--seg-hov);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
      }
      .ds-menu-segment:active {
        background: var(--seg-pre);
        transform: scale(0.97);
      }
      .ds-menu-segment:focus-visible {
        outline: 3px solid var(--brand-primary);
        outline-offset: 2px;
      }

      /* Split Button Component */
      .ds-split-button {
        --button-bg: var(--brand-primary);
        --button-fg: #fff;
        --button-border: transparent;
        --button-source-shadow: rgba(255, 255, 255, 0.28);
        --button-surface-shadow: rgba(0, 0, 0, 0.28);
        --split-separator: rgba(255, 255, 255, 0.25);
        display: inline-flex;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--active-radius, 14px);
        background: var(--button-bg);
        color: var(--button-fg);
        border: 1px solid var(--button-border);
        font-family: var(--token-font);
        font-weight: 500;
        white-space: nowrap;
        position: relative;
        transition:
          transform 0.15s ease,
          box-shadow 0.15s ease;
      }
      .ds-split-button[data-shadow="True"] {
        box-shadow:
          inset 1px 1px 4px var(--button-source-shadow),
          inset -1px -1px 4px var(--button-surface-shadow);
      }
      .ds-split-button[data-state="Hover"] {
        transform: translateY(-1px);
      }
      .ds-split-button[data-state="Pressed"] {
        transform: translateY(1px);
      }
      .ds-split-button[data-state="Focus"] {
        outline: 2px solid var(--brand-primary);
        outline-offset: 3px;
      }
      .ds-split-button[data-state="Disabled"] {
        opacity: 0.48;
        pointer-events: none;
        transform: none;
      }

      .ds-split-action,
      .ds-split-dropdown {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: inherit;
        border: none;
        cursor: pointer;
        transition: background 0.15s ease;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
      }
      .ds-split-button[data-state="Disabled"] .ds-split-action,
      .ds-split-button[data-state="Disabled"] .ds-split-dropdown {
        cursor: not-allowed;
      }

      .ds-split-action {
        padding: var(--split-py) var(--split-px);
        gap: 8px;
        border-top-left-radius: inherit;
        border-bottom-left-radius: inherit;
      }
      .ds-split-dropdown {
        padding: 0 calc(var(--split-px) * 0.75);
        border-top-right-radius: inherit;
        border-bottom-right-radius: inherit;
        border-left: 1px solid var(--split-separator);
      }

      .ds-split-action:hover,
      .ds-split-dropdown:hover {
        background: rgba(128, 128, 128, 0.15);
      }
      .ds-split-action:active,
      .ds-split-dropdown:active {
        background: rgba(128, 128, 128, 0.25);
      }

      .ds-split-button[data-size="Large"] {
        --split-py: 12px;
        --split-px: 16px;
        font-size: 16px;
        line-height: 24px;
      }
      .ds-split-button[data-size="Medium"] {
        --split-py: 8px;
        --split-px: 16px;
        font-size: 16px;
        line-height: 24px;
      }
      .ds-split-button[data-size="Small"] {
        --split-py: 6px;
        --split-px: 14px;
        font-size: 14px;
        line-height: 20px;
      }
      .ds-split-button[data-size="XSmall"] {
        --split-py: 4px;
        --split-px: 10px;
        font-size: 12px;
        line-height: 16px;
      }

      /* File Components Styling */
      .ds-file-uploader,
      .ds-file-status {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 32px 24px;
        border-radius: 16px;
        width: 100%;
        max-width: 480px;
        text-align: center;
        transition: all 0.2s ease;
        margin: 0 auto;
      }
      .ds-file-uploader.mobile,
      .ds-file-status.mobile {
        align-items: stretch;
        padding: 24px 20px;
      }

      .ds-fu-icon {
        font-size: 32px;
        margin-bottom: -8px;
      }
      .ds-fu-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 4px;
      }
      .ds-fu-desc {
        font-size: 0.85rem;
        color: var(--text-muted);
      }

      .ds-fu-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 8px 0;
        color: var(--text-muted);
        font-size: 0.85rem;
      }
      .ds-fu-divider::before,
      .ds-fu-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border);
      }
      .ds-fu-chips {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .ds-fu-chip {
        flex: 1;
        min-width: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        font-size: 0.8rem;
        cursor: pointer;
        transition: all 0.2s;
        color: var(--text);
        white-space: nowrap;
      }
      .ds-fu-chip:hover {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
        background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
      }
      .ds-fu-chip iconify-icon {
        font-size: 18px;
        color: var(--text-muted);
        transition: color 0.2s;
      }
      .ds-fu-chip:hover iconify-icon {
        color: var(--brand-primary);
      }

      .ds-fu-progress-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-align: left;
        background: var(--surface);
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }
      .ds-fu-progress-info {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text);
      }
      .ds-fu-progress-track {
        width: 100%;
        height: 6px;
        background: var(--surface-hover);
        border-radius: 4px;
        overflow: hidden;
      }
      .ds-fu-progress-bar {
        height: 100%;
        width: 50%;
        background: var(--brand-primary);
        border-radius: 4px;
      }

      .ds-fs-banner {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: 12px;
        width: 100%;
        text-align: left;
        font-size: 0.9rem;
        font-weight: 500;
      }

      .ds-file-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 8px 12px;
        border-radius: 12px;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        transition: background 0.2s;
      }
      .ds-fi-left {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ds-fi-details {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .ds-fi-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.3;
      }
      .ds-fi-name {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text);
        letter-spacing: 0.5px;
      }
      .ds-fi-size {
        font-size: 0.75rem;
        color: var(--text-muted);
        letter-spacing: 0.5px;
      }
      .ds-fi-status-icon {
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ds-fi-file-icon {
        font-size: 24px;
        color: var(--text);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .ds-fi-delete {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 24px;
        color: var(--text);
        border-radius: 50%;
        transition: background 0.2s;
        flex-shrink: 0;
      }
      .ds-fi-delete:hover {
        background: rgba(128, 128, 128, 0.15);
      }

      /* Checkbox Components Styling (Updated) */
      .ds-checkbox {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--ui-font);
        font-size: 1rem;
        font-weight: 500;
        color: var(--text);
        cursor: pointer;
        position: relative;
      }
      .ds-checkbox[data-state="Disabled"] {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Mirrors the .state-layer from your Figma export */
      .ds-checkbox-state-layer {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background-color: var(--chk-state-bg);
        transition: background-color 0.2s ease;
        position: relative;
        isolation: isolate;
      }

      /* Mirrors the .icon-container / .container from your Figma export */
      .ds-checkbox-box {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--chk-bg);
        border: 2px solid var(--chk-border);
        border-radius: 4px;
        transition: all 0.2s ease;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
      }

      /* Dynamic Sizing mapping */
      .ds-checkbox[data-size="Large"] {
        --chk-box-size: 24px;
        --chk-pad: 8px;
        font-size: 16px;
        gap: 8px;
      }
      .ds-checkbox[data-size="Medium"] {
        --chk-box-size: 20px;
        --chk-pad: 6px;
        font-size: 14px;
        gap: 6px;
      }
      .ds-checkbox[data-size="Small"] {
        --chk-box-size: 16px;
        --chk-pad: 4px;
        font-size: 12px;
        gap: 4px;
      }

      .ds-checkbox-state-layer {
        padding: var(--chk-pad);
      }
      .ds-checkbox-box {
        width: var(--chk-box-size);
        height: var(--chk-box-size);
      }

      /* Icon Styling */
      .ds-checkbox-icon {
        color: var(--chk-icon);
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }

      .ds-checkbox[data-status="Selected"] .ds-checkbox-icon,
      .ds-checkbox[data-status="Indeterminate"] .ds-checkbox-icon {
        opacity: 1;
        transform: scale(1);
      }

      /* Mirrors the .outer-circle focus ring from your Figma export */
      .ds-checkbox-ring {
        position: absolute;
        border-radius: 999px;
        border: 2px solid var(--chk-border);
        width: calc(var(--chk-box-size) + (var(--chk-pad) * 2));
        height: calc(var(--chk-box-size) + (var(--chk-pad) * 2));
        top: 0;
        left: 0;
        box-sizing: border-box;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.2s ease;
        z-index: 0;
      }

      .ds-checkbox[data-state="Focus"] .ds-checkbox-ring {
        opacity: 1;
        transform: scale(1);
      }
      .ds-checkbox[data-state="Pressed"] .ds-checkbox-box {
        transform: scale(0.92);
      }

      /* ========================================= */
      /* Radio Button Components Styling           */
      /* ========================================= */
      .ds-radio {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--ui-font);
        font-size: 1rem;
        font-weight: 500;
        color: var(--text);
        cursor: pointer;
        position: relative;
        margin: 0;
        padding: 0;
      }
      .ds-radio[data-state="Disabled"] {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Mirrors the .state-layer from your JSX */
      .ds-radio-state-layer {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background-color: var(--rad-state-bg);
        transition: background-color 0.2s ease;
        position: relative;
        flex-shrink: 0;
      }

      /* Mirrors the .radio-button2 (the outline) from your JSX */
      .ds-radio-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        border: 2px solid var(--rad-border);
        border-radius: 999px;
        transition: all 0.2s ease;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        flex-shrink: 0;
      }

      /* Dynamic Sizing mapping (Added explicit even-pixel dot sizes) */
      .ds-radio[data-size="Large"] {
        --rad-box-size: 24px;
        --rad-pad: 8px;
        font-size: 16px;
        --rad-dot-size: 12px;
        gap: 8px;
      }
      .ds-radio[data-size="Medium"] {
        --rad-box-size: 20px;
        --rad-pad: 6px;
        font-size: 14px;
        --rad-dot-size: 10px;
        gap: 6px;
      }
      .ds-radio[data-size="Small"] {
        --rad-box-size: 16px;
        --rad-pad: 4px;
        font-size: 12px;
        --rad-dot-size: 8px;
        gap: 4px;
      }

      .ds-radio-state-layer {
        padding: var(--rad-pad);
      }
      .ds-radio-box {
        width: var(--rad-box-size);
        height: var(--rad-box-size);
      }

      /* Perfect flexbox centering using exact pixel sizes */
      .ds-radio-dot {
        background-color: var(--rad-dot);
        opacity: 0;
        transform: scale(0.1);
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border-radius: 999px;

        /* Use the exact pixel sizes defined above */
        width: var(--rad-dot-size);
        height: var(--rad-dot-size);

        /* Ensure no absolute positioning interferes */
        position: static;
        margin: auto;
      }

      .ds-radio[data-status="Selected"] .ds-radio-dot {
        opacity: 1;
        transform: scale(1);
      }

      .ds-radio[data-status="Selected"] .ds-radio-dot {
        opacity: 1;
        transform: scale(1);
      }

      /* Mirrors the .outer-circle focus ring from your JSX */
      .ds-radio-ring {
        position: absolute;
        border-radius: 999px;
        border: 2px solid var(--rad-border);
        width: calc(var(--rad-box-size) + (var(--rad-pad) * 2));
        height: calc(var(--rad-box-size) + (var(--rad-pad) * 2));
        top: 0;
        left: 0;
        box-sizing: border-box;
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.2s ease;
        z-index: 0;
      }

      /* Interactive States */
      .ds-radio[data-state="Focus"] .ds-radio-ring {
        opacity: 1;
        transform: scale(1);
      }
      .ds-radio[data-state="Pressed"] .ds-radio-box {
        transform: scale(0.92);
      }
      /* ========================================= */

      /* ========================================= */
      /* Toggle Switch Components Styling          */
      /* ========================================= */
      .ds-switch {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: var(--ui-font);
        font-size: 1rem;
        font-weight: 500;
        color: var(--text);
        cursor: pointer;
        position: relative;
        margin: 0;
        padding: 0;
      }
      .ds-switch[data-state="Disabled"] {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Mirrors the track / outer container of the switch */
      .ds-switch-track {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        background-color: var(--sw-bg);
        border: 2px solid var(--sw-border);
        border-radius: 999px;
        transition: all 0.2s ease;
        box-sizing: border-box;
        position: relative;
        flex-shrink: 0;
        padding: var(--sw-pad);
        width: var(--sw-track-w);
        height: var(--sw-track-h);
      }

      /* Focus Ring (Matches Figma's .focusindicator) */
      .ds-switch-ring {
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        border-radius: 999px;
        border: 2px solid var(--sw-ring);
        opacity: 0;
        transform: scale(0.85);
        transition: all 0.2s ease;
        pointer-events: none;
      }

      .ds-switch[data-state="Focus"] .ds-switch-ring {
        opacity: 1;
        transform: scale(1);
      }

      /* Inner handle wrapper to manage the slide animation */
      .ds-switch-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--sw-thumb-sz);
        height: var(--sw-thumb-sz);
        transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
        position: relative;
        z-index: 1;
      }

      /* Mirrors the .state-layer for hover/focus ripples */
      .ds-switch-state-layer {
        position: absolute;
        width: 250%;
        height: 250%;
        top: 50%;
        left: 50%;
        transform: translate(
          -50%,
          -50%
        ); /* <--- Forces mathematical dead-center */
        border-radius: 999px;
        background-color: var(--sw-state-bg);
        transition: background-color 0.2s ease;
        z-index: 0;
      }

      /* Mirrors the .shape / .icon-holder (The thumb itself) */
      .ds-switch-thumb {
        width: 100%;
        height: 100%;
        border-radius: 999px;
        background-color: var(--sw-thumb-bg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        color: var(--sw-icon-color);
      }

      .ds-switch-icon {
        /* Increased the relative size from 0.7 to 0.85 so it fills the thumb better */
        font-size: calc(var(--sw-thumb-sz) * 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.5) rotate(-45deg);
        transition: all 0.25s ease;
      }

      /* Forces the SVG paths to render visibly thicker */
      .ds-switch-icon iconify-icon {
        stroke: currentColor;
        stroke-width: 1.5px;
      }

      .ds-switch[data-icon="True"] .ds-switch-icon {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }

      /* Dynamic Sizing mapping */
      .ds-switch[data-size="Large"] {
        --sw-track-w: 52px;
        --sw-track-h: 32px;
        --sw-thumb-sz: 24px;
        --sw-pad: 2px;
        font-size: 16px;
      }
      .ds-switch[data-size="Medium"] {
        --sw-track-w: 44px;
        --sw-track-h: 24px;
        --sw-thumb-sz: 16px;
        --sw-pad: 2px;
        font-size: 14px;
      }
      .ds-switch[data-size="Small"] {
        --sw-track-w: 36px;
        --sw-track-h: 20px;
        --sw-thumb-sz: 12px;
        --sw-pad: 2px;
        font-size: 12px;
      }

      /* Mathematical translation for ON state (Accounts for the 2px borders) */
      .ds-switch[data-status="On"] .ds-switch-handle {
        transform: translateX(
          calc(
            var(--sw-track-w) - var(--sw-thumb-sz) - (var(--sw-pad) * 2) - 4px
          )
        );
      }

      /* Interactive Pressed State (Shrinks slightly to give tactile feedback instead of breaking layout) */
      .ds-switch[data-state="Pressed"] .ds-switch-thumb {
        transform: scale(0.9);
      }
      /* ========================================= */

      /* ========================================= */
      /* Date / Calendar Cell Component Styling    */
      /* ========================================= */
      .ds-calendar-cell {
        position: relative;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--ui-font);
        font-size: 1rem;
        color: var(--cal-text);
        cursor: pointer;
        isolation: isolate;
      }
      .ds-calendar-cell[data-state="Disabled"] {
        opacity: 0.38;
        cursor: not-allowed;
      }
      .cal-range-left {
        position: absolute;
        height: 40px;
        top: calc(50% - 20px);
        width: 50%;
        left: -10%; /* Extends outside the cell bounds */
        right: 50%;
        background-color: var(--cal-highlight);
        z-index: 0;
      }
      .cal-range-right {
        position: absolute;
        height: 40px;
        top: calc(50% - 20px);
        width: 50%;
        left: 50%;
        right: -10%; /* Extends outside the cell bounds */
        background-color: var(--cal-highlight);
        z-index: 0;
      }
      .cal-container {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background-color: var(--cal-bg);
        border: 1px solid var(--cal-border);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        z-index: 2;
      }
      .cal-state-layer {
        width: 100%;
        height: 100%;
        background-color: var(--cal-state);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
      }
      .cal-date {
        position: relative;
        line-height: 24px;
        z-index: 3;
      }
      .cal-focus-ring {
        position: absolute;
        width: 44px;
        height: 44px;
        top: calc(50% - 22px);
        left: calc(50% - 22px);
        border-radius: 999px;
        border: 2px solid var(--brand-primary);
        box-sizing: border-box;
        z-index: 4;
      }
      .ds-year-cell {
        position: relative;
        width: 88px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--ui-font);
        font-size: 0.875rem; /* 14px */
        color: var(--year-text);
        cursor: pointer;
        isolation: isolate;
      }
      .ds-year-cell[data-state="Disabled"] {
        opacity: 0.38;
        cursor: not-allowed;
      }
      .year-container {
        width: 72px;
        height: 36px;
        border-radius: 999px;
        background-color: var(--year-bg);
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        z-index: 2;
      }
      .year-state-layer {
        width: 100%;
        height: 100%;
        background-color: var(--year-state);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
      }
      .year-text {
        position: relative;
        line-height: 22px;
        letter-spacing: 0.25px;
        z-index: 3;
      }
      .year-focus-ring {
        position: absolute;
        width: 78px;
        height: 42px;
        top: calc(50% - 21px);
        left: calc(50% - 39px);
        border-radius: 999px;
        border: 2px solid var(--brand-primary);
        box-sizing: border-box;
        z-index: 4;
      }

      /* ========================================= */
      /* Avatar & Indicator Components Styling     */
      /* ========================================= */
      .ds-status-indicator {
        border-radius: 999px;
        background-color: var(--ind-bg);
        border: 2px solid var(--ind-border-color, var(--surface));
        box-sizing: border-box;
        width: var(--ind-size);
        height: var(--ind-size);
        flex-shrink: 0;
        transition:
          background-color 0.2s ease,
          border-color 0.2s ease;
      }

      .ds-avatar {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--ava-size);
        height: var(--ava-size);
        border-radius: var(--ava-radius);
        background-color: var(--ava-bg);
        color: var(--ava-fg);
        font-family: var(--ui-font);
        font-weight: 600;
        flex-shrink: 0;
        transition: all 0.2s ease;
        user-select: none;
      }

      .ds-avatar-inner {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .ds-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .ds-avatar-text {
        font-size: var(--ava-fs);
        line-height: 1;
        letter-spacing: 0.5px;
      }

      .ds-avatar-icon {
        font-size: calc(var(--ava-size) * 0.5);
        color: inherit;
      }

      .ds-avatar .ds-status-indicator {
        position: absolute;
        bottom: -2px;
        right: -2px;
        z-index: 2;
      }
      /* ========================================= */

      /* ========================================= */
      /* Avatar Group Component Styling            */
      /* ========================================= */
      .ds-avatar-group-wrapper {
        display: inline-flex;
        align-items: center;
        gap: var(--grp-gap, 12px);
      }
      .ds-avatar-group {
        display: inline-flex;
        align-items: center;
        flex-direction: row;
      }
      .ds-avatar-group .ds-avatar {
        border: 2px solid var(--surface); /* Creates the cutout effect */
        margin-left: var(--ava-overlap, -12px);
        transition: transform 0.2s ease;
      }
      .ds-avatar-group .ds-avatar:first-child {
        margin-left: 0;
      }
      .ds-avatar-group .ds-avatar:hover {
        transform: translateY(-4px);
        z-index: 10;
      }

      /* Dynamic Sizing mapping for overlap */
      .ds-avatar-group-wrapper[data-size="XXLarge"] {
        --ava-overlap: -20px;
        --grp-gap: 16px;
      }
      .ds-avatar-group-wrapper[data-size="XLarge"] {
        --ava-overlap: -16px;
        --grp-gap: 14px;
      }
      .ds-avatar-group-wrapper[data-size="Large"] {
        --ava-overlap: -14px;
        --grp-gap: 12px;
      }
      .ds-avatar-group-wrapper[data-size="Medium"] {
        --ava-overlap: -12px;
        --grp-gap: 10px;
      }
      .ds-avatar-group-wrapper[data-size="Small"] {
        --ava-overlap: -10px;
        --grp-gap: 8px;
      }
      .ds-avatar-group-wrapper[data-size="XSmall"] {
        --ava-overlap: -8px;
        --grp-gap: 6px;
      }
      .ds-avatar-group-wrapper[data-size="XXSmall"] {
        --ava-overlap: -6px;
        --grp-gap: 4px;
      }
      /* ========================================= */

      /* ========================================= */
      /* Label & Helper Text Building Blocks       */
      /* ========================================= */

      .ds-label-set {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--ui-font);
        text-align: left;
      }
      .ds-label-set[data-size="Default"] {
        font-size: 14px;
        line-height: 22px;
      }
      .ds-label-set[data-size="Small"] {
        font-size: 12px;
        line-height: 20px;
      }

      .ds-label-text {
        font-weight: 500;
        color: var(--text);
        letter-spacing: 0.25px;
      }
      .ds-label-asterisk {
        color: var(--lbl-error, #e50000);
      }
      .ds-label-optional {
        color: var(--text-muted);
      }

      .ds-helper-set {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: var(--ui-font);
        text-align: left;
        color: var(--hlp-color);
      }
      .ds-helper-set[data-size="Default"] {
        font-size: 14px;
        line-height: 22px;
      }
      .ds-helper-set[data-size="Small"] {
        font-size: 12px;
        line-height: 20px;
      }

      .ds-helper-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25em;
      }
      .ds-helper-text {
        letter-spacing: 0.25px;
      }

      /* Input Set Building Block */
      .ds-input-block {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 288px;
        box-sizing: border-box;
        font-family: var(--ui-font);
        transition: all 0.2s ease;
        background: var(--inpb-bg);
        border: 1px solid var(--inpb-border-color);
        border-radius: var(--inpb-radius);
        box-shadow: var(--inpb-shadow, none);
        outline: var(--inpb-outline, none);
        outline-offset: -1px;
        color: var(--inpb-text);
      }

      .ds-input-block[data-size="Default"] {
        padding: 12px;
        font-size: 16px;
        height: 48px;
      }
      .ds-input-block[data-size="Small"] {
        padding: 8px 12px;
        font-size: 14px;
        height: 38px;
      }

      .ds-input-block[data-type="In-line"] {
        border-color: transparent transparent var(--inpb-border-color)
          transparent !important;
        border-radius: 0 !important;
      }

      .ds-input-block-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25em;
        flex-shrink: 0;
        color: inherit;
      }

      .ds-input-block-content {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
      }

      .ds-input-block-cursor {
        width: 1.5px;
        height: 1.2em;
        background-color: var(--brand-primary);
        animation: input-blink 1s step-end infinite;
        flex-shrink: 0;
      }

      @keyframes input-blink {
        50% {
          opacity: 0;
        }
      }

      .ds-input-block-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.5;
      }
      .ds-input-block-text::placeholder {
        color: var(--inpb-text);
        opacity: 0.7;
      }

      /* Input with Action Building Block */
      .ds-input-action-block {
        display: flex;
        align-items: stretch;
        width: 288px;
        box-sizing: border-box;
        font-family: var(--ui-font);
        transition: all 0.2s ease;
        background: var(--inpb-bg);
        border: 1px solid var(--inpb-border-color);
        border-radius: var(--inpb-radius);
        box-shadow: var(--inpb-shadow, none);
        outline: var(--inpb-outline, none);
        outline-offset: -1px;
        color: var(--inpb-text);
        padding: 0;
        overflow: hidden;
      }

      .ds-input-action-block[data-size="Default"] {
        height: 48px;
      }
      .ds-input-action-block[data-size="Small"] {
        height: 38px;
      }

      .ds-input-action-block[data-type="In-line"] {
        border-color: transparent transparent var(--inpb-border-color)
          transparent !important;
        border-radius: 0 !important;
      }

      .ds-input-action-content-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
        padding: 0 12px;
      }

      .ds-input-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        border-left: 1px solid var(--inpb-border-color);
        background: var(--inpb-btn-bg, transparent);
        color: inherit;
        cursor: pointer;
        transition: background 0.2s ease;
      }

      /* Input with CTA Building Block */
      .ds-input-cta-block {
        display: flex;
        align-items: stretch;
        width: 320px; /* Slightly wider to accommodate text */
        box-sizing: border-box;
        font-family: var(--ui-font);
        transition: all 0.2s ease;
        background: var(--inpb-bg);
        border: 1px solid var(--inpb-border-color);
        border-radius: var(--inpb-radius);
        box-shadow: var(--inpb-shadow, none);
        outline: var(--inpb-outline, none);
        outline-offset: -1px;
        color: var(--inpb-text);
        padding: 0;
        overflow: hidden; /* Fixes corner bleeding */
      }

      .ds-input-cta-block[data-size="Default"] {
        height: 48px;
      }
      .ds-input-cta-block[data-size="Small"] {
        height: 38px;
      }

      .ds-input-cta-block[data-type="In-line"] {
        border-color: transparent transparent var(--inpb-border-color)
          transparent !important;
        border-radius: 0 !important;
      }

      .ds-input-cta-content-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
        padding: 0 12px;
      }

      .ds-input-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 16px;
        border: none;
        border-left: 1px solid var(--inpb-border-color);
        background: var(--inpb-btn-bg, transparent);
        color: var(--inpb-btn-text, inherit);
        cursor: pointer;
        transition: background 0.2s ease;
        font-family: var(--ui-font);
        font-weight: 500;
        font-size: inherit;
      }

      /* Selection Input Building Block */
      .ds-selection-input-block {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 288px;
        box-sizing: border-box;
        font-family: var(--ui-font);
        transition: all 0.2s ease;
        background: var(--inpb-bg);
        border: 1px solid var(--inpb-border-color);
        border-radius: var(--inpb-radius);
        box-shadow: var(--inpb-shadow, none);
        outline: var(--inpb-outline, none);
        outline-offset: -1px;
        color: var(--inpb-text);
        cursor: pointer;
      }

      .ds-selection-input-block[data-size="Default"] {
        padding: 12px;
        height: 48px;
        font-size: 16px;
      }
      .ds-selection-input-block[data-size="Small"] {
        padding: 8px 12px;
        height: 38px;
        font-size: 14px;
      }

      .ds-selection-input-block[data-type="In-line"] {
        border-color: transparent transparent var(--inpb-border-color)
          transparent !important;
        border-radius: 0 !important;
      }

      .ds-selection-input-content {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1;
        min-width: 0;
      }

      .ds-selection-input-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        line-height: 1.5;
      }

      .ds-selection-input-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25em;
        flex-shrink: 0;
        color: inherit;
      }

      /* Selection Input Interactivity & Dropdown */
      .ds-selection-input-wrapper {
        position: relative;
        display: inline-block;
        width: max-content;
      }

      /* Rotate the arrow when open */
      .ds-selection-input-wrapper.open
        .ds-selection-input-block
        > .ds-selection-input-icon:last-child
        iconify-icon {
        transform: rotate(180deg);
      }
      .ds-selection-input-block
        > .ds-selection-input-icon:last-child
        iconify-icon {
        transition: transform 0.2s ease;
      }

      .ds-selection-input-dropdown {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        width: 100%;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--active-radius, 8px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 500;
        display: none;
        flex-direction: column;
        padding: 6px;
        max-height: 200px;
        overflow-y: auto;
      }

      .ds-selection-input-wrapper.open .ds-selection-input-dropdown {
        display: flex;
        animation: slideDown 0.15s ease-out;
      }

      .ds-selection-option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-family: var(--ui-font);
        font-size: 0.875rem;
        color: var(--text-muted);
        transition:
          background 0.2s,
          color 0.2s;
      }

      .ds-selection-option:hover {
        background: var(--surface-hover);
        color: var(--text);
      }
      .ds-selection-option.selected {
        color: var(--text);
        font-weight: 600;
        background: var(--surface-hover);
      }

      /* Input Field Wrapper Component */
      .ds-input-field-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px; /* Spacing between label, input, and helper */
        width: max-content;
        font-family: var(--ui-font);
      }

      /* ========================================= */
      /* Keyboard Shortcut Component Styling       */
      /* ========================================= */
      .ds-kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0px 6px;
        border-radius: 6px;
        font-family: var(--ui-font);
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.5px;
        min-width: 24px;
        height: 24px;
        box-sizing: border-box;
        white-space: nowrap;
        box-shadow:
          0 1px 1px rgba(0, 0, 0, 0.05),
          inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      }
      .ds-kbd[data-palette="Neutral"] {
        background-color: var(--surface-hover);
        color: var(--text-muted);
        border: 1px solid var(--border);
      }
      .ds-kbd[data-palette="Brand"] {
        background-color: color-mix(
          in srgb,
          var(--brand-primary) 10%,
          transparent
        );
        color: var(--brand-primary);
        border: 1px solid
          color-mix(in srgb, var(--brand-primary) 20%, transparent);
      }
      .kbd-group {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .ds-kbd iconify-icon {
        font-size: 1.25em;
        margin: 0 -2px; /* Tucks the icon slightly to match standard character width */
      }

      /* ========================================= */
      /* Input Date Picker Component Styling       */
      /* ========================================= */
      .ds-idp-wrapper {
        display: flex;
        flex-direction: column;
        width: 320px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--active-radius, 16px);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        padding: 16px;
        gap: 16px;
        font-family: var(--ui-font);
        box-sizing: border-box;
        transition: opacity 0.2s ease;
      }
      .ds-idp-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        padding-bottom: 8px;
        gap: 30px;
      }
      .ds-idp-header-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
      }
      .ds-idp-supporting {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-muted);
        line-height: 1.5;
      }
      .ds-idp-heading {
        font-size: 32px;
        font-weight: 400;
        color: var(--text);
        line-height: 1.2;
        letter-spacing: -0.5px;
      }
      .ds-idp-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--surface-hover);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--text);
        flex-shrink: 0;
      }
      .ds-idp-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
      }
      .ds-idp-range-row {
        display: flex;
        flex-direction: row !important;
        gap: 12px;
        width: 100%;
      }
      .ds-idp-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 0;
      }

      /* ========================================= */
      /* Modal Date Picker Component Styling       */
      /* ========================================= */
      .ds-calendar-cell[data-type="Selected"] {
        z-index: 2;
      } /* Fixes the highlight overlap */

      .ds-mdp-wrapper {
        width: 360px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--active-radius, 16px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        font-family: var(--ui-font);
      }
      .ds-mdp-wrapper[data-type="Range Fullscreen"] {
        height: 744px;
      }

      .ds-mdp-top-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px 0;
        flex-shrink: 0;
      }

      .ds-mdp-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 24px 24px 16px;
        border-bottom: 1px solid var(--border);
        gap: 16px;
        flex-shrink: 0;
      }
      .ds-mdp-header-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
      }
      .ds-mdp-supporting {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-muted);
        line-height: 1.5;
      }
      .ds-mdp-heading {
        font-size: 32px;
        font-weight: 400;
        color: var(--text);
        line-height: 1.2;
        letter-spacing: -0.5px;
        white-space: nowrap;
      }

      .ds-mdp-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px 8px;
        flex-shrink: 0;
      }
      .ds-mdp-month-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--ui-font);
        font-size: 14px;
        font-weight: 500;
        color: var(--text);
        background: transparent;
        border: 0;
        padding: 8px 12px;
        border-radius: 999px;
        cursor: pointer;
        transition: background 0.2s;
        margin-left: -12px;
      }
      .ds-mdp-month-btn:hover {
        background: var(--surface-hover);
      }
      .ds-mdp-nav {
        display: flex;
        gap: 8px;
        margin-right: -8px;
      }

      /* Sticky Weekdays ensures perfect alignment with scrolling dates */
      .ds-mdp-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 48px);
        justify-content: center;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: var(--text-muted);
        padding: 8px 0 16px;
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 10;
      }

      .ds-mdp-calendar-scroll {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        min-height: 0;
        padding-bottom: 16px;
      }
      /* Elegant scrollbar formatting */
      .ds-mdp-calendar-scroll::-webkit-scrollbar {
        width: 6px;
      }
      .ds-mdp-calendar-scroll::-webkit-scrollbar-track {
        background: transparent;
      }
      .ds-mdp-calendar-scroll::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
      }

      .ds-mdp-days {
        display: grid;
        grid-template-columns: repeat(7, 48px);
        justify-content: center;
        row-gap: 0;
      }

      .ds-mdp-years {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px 8px;
        padding: 16px 24px 24px;
        justify-items: center;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1;
        min-height: 0;
      }
      .ds-mdp-years::-webkit-scrollbar {
        width: 6px;
      }
      .ds-mdp-years::-webkit-scrollbar-track {
        background: transparent;
      }
      .ds-mdp-years::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
      }

      .ds-mdp-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 24px 24px;
        flex-shrink: 0;
      }
      .ds-mdp-footer-actions {
        display: flex;
        gap: 8px;
      }
      .ds-mdp-feedback {
        padding: 0 24px 12px;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 500;
        text-align: right;
      }

      /* ========================================= */
      /* ========================================= */

      .ds-input-cta-block[data-state="Disabled"] .ds-input-cta-btn {
        cursor: not-allowed;
      }
      .ds-input-cta-block:not([data-state="Disabled"]) .ds-input-cta-btn:hover {
        background: var(--surface-hover);
      }
      .ds-input-cta-block[data-type="In-line"] .ds-input-cta-btn {
        border-left: none;
      }

      .ds-input-action-btn:hover {
        background: var(--surface-hover);
      }
      .ds-input-action-block[data-type="In-line"] .ds-input-action-btn {
        border-left: none;
      }

      .button-meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.5rem;
      }
      .button-meta-item {
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        padding: 1rem;
        min-width: 0;
      }
      .button-meta-label {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
      }
      .button-meta-value {
        display: block;
        font-size: 0.875rem;
        color: var(--text);
        word-break: break-word;
      }
      .button-variant-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 1rem;
        margin-top: 2rem;
      }
      .button-variant-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-main);
        padding: 1rem;
      }
      .button-variant-label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .components-shell {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 1.5rem;
        align-items: start;
      }
      .component-tree {
        position: sticky;
        top: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-main);
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .tree-title {
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-muted);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 0.5rem 0.75rem;
      }

      .component-tree-item,
      .badge-tree-item,
      .figma-tree-item,
      .figma-nav-tree-item,
      .figma-overlay-tree-item {
        appearance: none;
        border: none;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 8px;
        font-family: var(--ui-font);
        font-size: 0.9rem;
        text-align: left;
        transition:
          background 0.2s ease,
          color 0.2s ease;
      }
      .component-tree-item:hover,
      .badge-tree-item:hover,
      .figma-tree-item:hover,
      .figma-nav-tree-item:hover,
      .figma-overlay-tree-item:hover {
        background: var(--surface-hover);
        color: var(--text);
      }
      .component-tree-item.active,
      .badge-tree-item.active,
      .figma-tree-item.active,
      .figma-nav-tree-item.active,
      .figma-overlay-tree-item.active {
        background: var(--surface-hover);
        color: var(--text);
        border: 1px solid var(--border);
      }

      /* Figma native-code implementation: Badge, Pill, and Status dot. */
      .ds-badge {
        --badge-color: var(--brand-primary);
        --badge-fg: var(--brand-on-primary, #fff);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 0;
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--badge-color);
        color: var(--badge-fg);
        font-family: var(--ui-font);
        font-weight: 500;
        letter-spacing: 0.25px;
        white-space: nowrap;
      }
      .ds-badge[data-size="Large"] {
        min-height: 32px;
        padding: 4px 12px;
        font-size: 14px;
        line-height: 24px;
      }
      .ds-badge[data-size="Medium"] {
        min-height: 24px;
        gap: 6px;
        padding: 2px 8px;
        font-size: 12px;
        line-height: 20px;
      }
      .ds-badge[data-size="Small"] {
        min-height: 20px;
        gap: 4px;
        padding: 1px 8px;
        font-size: 10px;
        line-height: 18px;
      }
      .ds-badge[data-type="Tonal"],
      .ds-badge[data-type="Tonal-Outline"] {
        background: color-mix(in srgb, var(--badge-color) 16%, transparent);
        color: var(--badge-color);
      }
      .ds-badge[data-type="Tonal-Outline"],
      .ds-badge[data-type="Outline"] {
        border-color: var(--badge-color);
      }
      .ds-badge[data-type="Outline"],
      .ds-badge[data-type="Ghost"] {
        background: transparent;
        color: var(--badge-color);
      }
      .ds-badge[data-only-icon="true"] {
        width: 32px;
        padding-inline: 0;
      }
      .ds-badge[data-size="Medium"][data-only-icon="true"] { width: 24px; }
      .ds-badge[data-size="Small"][data-only-icon="true"] { width: 20px; }
      .ds-badge__icon,
      .ds-badge__avatar {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
      }
      .ds-badge__icon { font-size: 16px; }
      .ds-badge__avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--badge-fg) 22%, transparent);
        font-size: 10px;
        font-weight: 700;
      }
      .ds-badge[data-size="Medium"] .ds-badge__avatar { width: 18px; height: 18px; font-size: 8px; }
      .ds-badge[data-size="Small"] .ds-badge__avatar { width: 16px; height: 16px; font-size: 7px; }
      .ds-status-dot {
        --dot-color: var(--brand-primary);
        display: inline-block;
        flex: 0 0 auto;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: var(--dot-color);
      }
      .ds-status-dot[data-size="Medium"] { width: 10px; height: 10px; }
      .ds-status-dot[data-size="Small"] { width: 8px; height: 8px; }
      .ds-pill {
        --pill-color: var(--brand-primary);
        --pill-fg: var(--brand-on-primary, #fff);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 18px;
        padding: 0 4px;
        border: 1px solid var(--pill-fg);
        border-radius: 999px;
        background: var(--pill-color);
        color: var(--pill-fg);
        font-family: var(--ui-font);
        font-size: 10px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: 0.25px;
        white-space: nowrap;
      }
      .ds-pill[data-shape="Square"] { border-radius: 4px; }
      .ds-pill .ds-status-dot { width: 6px; height: 6px; background: currentColor; }

      /* Figma native-code implementation: Rating, Chips, Pagination, Tabs,
         Progress and Accordion. Sizes, spacing and type follow the inspected
         component variants; surrounding values use the documentation tokens. */
      .figma-core-stage {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }
      .ds-rating,
      .ds-rating__stars {
        display: inline-flex;
        align-items: center;
      }
      .ds-rating { gap: 8px; }
      .ds-rating__stars { gap: 4px; }
      .ds-rating__star {
        appearance: none;
        display: inline-flex;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: color-mix(in srgb, var(--core-brand) 28%, var(--text-muted));
        cursor: pointer;
        font-size: 24px;
        line-height: 1;
      }
      .ds-rating__star.is-filled { color: var(--core-brand); }
      .ds-rating__ratio {
        color: var(--text-muted);
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
      }
      .ds-chip {
        --chip-bg: var(--text-muted);
        --chip-fg: var(--bg-main);
        position: relative;
        box-sizing: border-box;
        display: inline-flex;
        min-height: 24px;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 2px 8px;
        border: 1px solid transparent;
        border-radius: 32px;
        background: var(--chip-bg);
        color: var(--chip-fg);
        font-family: var(--ui-font);
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0.5px;
        cursor: pointer;
        white-space: nowrap;
      }
      .ds-chip[data-size="Medium"] { min-height: 32px; padding: 4px 12px; font-size: 14px; line-height: 22px; }
      .ds-chip[data-size="Large"] { min-height: 40px; padding: 8px 16px; font-size: 14px; line-height: 22px; }
      .ds-chip[data-style="Tone"] { background: color-mix(in srgb, var(--core-brand) 16%, var(--surface)); color: var(--core-brand); }
      .ds-chip[data-style="Outline"] { background: transparent; border-color: var(--core-brand); color: var(--core-brand); }
      .ds-chip[data-selected="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--core-brand) 40%, transparent); }
      .ds-chip__badge { position: absolute; top: -8px; right: -7px; }
      .ds-chip__icon { display: inline-flex; font-size: 16px; }
      .ds-pagination {
        display: flex;
        max-width: 100%;
        align-items: center;
        justify-content: center;
        overflow-x: auto;
        scrollbar-width: thin;
      }
      .ds-pagination__item {
        appearance: none;
        box-sizing: border-box;
        display: inline-flex;
        min-width: 29px;
        min-height: 32px;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text);
        font-family: var(--ui-font);
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0.25px;
        cursor: pointer;
      }
      .ds-pagination__item[aria-current="page"] { background: color-mix(in srgb, var(--core-brand) 16%, var(--surface)); color: var(--core-brand); }
      .ds-pagination__item:hover { background: var(--surface-hover); }
      .ds-pagination__item--arrow { min-width: 24px; padding-inline: 0; font-size: 18px; }
      .ds-pagination__summary { margin-left: 16px; color: var(--text-muted); font-size: 12px; line-height: 20px; white-space: nowrap; }
      .ds-tabs {
        display: flex;
        max-width: 100%;
        gap: 4px;
        overflow-x: auto;
        scrollbar-width: thin;
      }
      .ds-tabs[data-type="Segmented"] { padding: 4px; border-radius: 12px; background: var(--surface-hover); }
      .ds-tabs[data-type="Contained"] { border-bottom: 1px solid var(--border); }
      .ds-tabs[data-type="Underline"] { border-bottom: 1px solid var(--border); border-radius: 0; }
      .ds-tabs__tab {
        appearance: none;
        box-sizing: border-box;
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text-muted);
        font-family: var(--ui-font);
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.25px;
        cursor: pointer;
        white-space: nowrap;
      }
      .ds-tabs[data-size="Default"] .ds-tabs__tab { min-height: 44px; padding: 10px 12px; font-size: 12px; line-height: 20px; }
      .ds-tabs__tab[aria-selected="true"] { color: var(--core-brand); }
      .ds-tabs[data-type="Segmented"] .ds-tabs__tab[aria-selected="true"] { background: var(--surface); box-shadow: 0 4px 4px rgba(0,0,0,.08); }
      .ds-tabs[data-type="Contained"] .ds-tabs__tab[aria-selected="true"] { background: color-mix(in srgb, var(--core-brand) 16%, var(--surface)); }
      .ds-tabs[data-type="Underline"] .ds-tabs__tab { border-radius: 0; border-bottom: 2px solid transparent; }
      .ds-tabs[data-type="Underline"] .ds-tabs__tab[aria-selected="true"] { border-bottom-color: var(--core-brand); }
      .ds-tabs[data-color="Neutral"] .ds-tabs__tab[aria-selected="true"] { color: var(--text); }
      .ds-tabs[data-color="Neutral"][data-type="Contained"] .ds-tabs__tab[aria-selected="true"] { background: var(--surface); }
      .ds-tabs[data-color="Neutral"][data-type="Underline"] .ds-tabs__tab[aria-selected="true"] { border-bottom-color: var(--text); }
      .ds-tabs__icon { display: inline-flex; font-size: 20px; }
      .ds-progress { display: flex; width: min(368px, 100%); align-items: center; gap: 8px; }
      .ds-progress__track { flex: 1 1 auto; height: 4px; min-width: 1px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--core-brand) 16%, var(--surface)); }
      .ds-progress[data-size="Large"] .ds-progress__track { height: 8px; }
      .ds-progress__value { height: 100%; border-radius: 8px; background: var(--core-brand); transition: width .16s ease; }
      .ds-progress__label { flex: 0 0 auto; color: var(--text); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: .5px; }
      .ds-accordion {
        box-sizing: border-box;
        width: min(640px, 100%);
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--surface);
        box-shadow: 0 4px 4px rgba(0,0,0,.08);
      }
      .ds-accordion[data-type="Lined"] { border-inline: 0; border-radius: 0; box-shadow: none; }
      .ds-accordion[data-type="Outlined with shadow"] { box-shadow: 0 4px 8px rgba(0,0,0,.16); }
      .ds-accordion__trigger {
        appearance: none;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border: 0;
        background: transparent;
        color: var(--text);
        font-family: var(--ui-font);
        text-align: left;
        cursor: pointer;
      }
      .ds-accordion__content { display: flex; min-width: 0; flex: 1 1 auto; align-items: flex-start; gap: 8px; }
      .ds-accordion__leading { display: inline-flex; flex: 0 0 auto; width: 20px; height: 20px; align-items: center; justify-content: center; color: var(--core-brand); font-size: 20px; }
      .ds-accordion__title-row { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 8px; }
      .ds-accordion__title { min-width: 0; color: var(--text); font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: .25px; }
      .ds-accordion__badge { flex: 0 0 auto; }
      .ds-accordion__chevron { display: inline-flex; flex: 0 0 auto; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--text-muted); font-size: 20px; transition: transform .16s ease; }
      .ds-accordion[data-expanded="true"] .ds-accordion__chevron { transform: rotate(180deg); }
      .ds-accordion__panel { padding: 0 16px 16px 44px; color: var(--text-muted); font-size: 14px; line-height: 22px; }
      .ds-card {
        box-sizing: border-box;
        display: flex;
        width: min(360px, 100%);
        aspect-ratio: 1;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 24px;
        background: var(--surface);
        color: var(--text);
      }
      .ds-card[data-type="Elevated"] { border-color: transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); }
      .ds-card[data-type="Filled"] { border-color: transparent; background: var(--surface-hover); }
      .ds-card__media { display: grid; min-height: 132px; place-items: center; background: color-mix(in srgb, var(--core-brand) 14%, var(--surface)); color: var(--core-brand); font-size: 32px; }
      .ds-card__content { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; justify-content: space-between; gap: 16px; padding: 20px 24px 24px; }
      .ds-card__title { margin: 0; color: var(--text); font-size: 16px; font-weight: 600; line-height: 24px; }
      .ds-card__body { margin: 8px 0 0; color: var(--text-muted); font-size: 14px; line-height: 22px; }
      .ds-card__actions { display: flex; justify-content: flex-end; gap: 8px; }
      .ds-card__action { appearance: none; min-height: 36px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font-family: var(--ui-font); font-size: 12px; font-weight: 500; line-height: 20px; cursor: pointer; }
      .ds-card__action--primary { border-color: var(--core-brand); background: var(--core-brand); color: #fff; }
      .ds-table-wrap { width: min(840px, 100%); max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
      .ds-table { width: 840px; border-collapse: collapse; table-layout: fixed; color: var(--text); font-family: var(--ui-font); }
      .ds-table th, .ds-table td { box-sizing: border-box; width: 280px; min-width: 280px; height: 56px; padding: 4px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; font-size: 16px; line-height: 24px; }
      .ds-table th { background: var(--surface-hover); color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: .25px; text-transform: uppercase; }
      .ds-table tbody tr:last-child td { border-bottom: 0; }
      .ds-table[data-density="Compact"] th, .ds-table[data-density="Compact"] td { height: 44px; }
      .ds-table__status { display: inline-flex; align-items: center; gap: 6px; color: var(--core-brand); font-size: 14px; font-weight: 500; line-height: 22px; }
      .ds-table__status::before { width: 6px; height: 6px; border-radius: 99px; background: currentColor; content: ""; }
      @media (max-width: 600px) {
        .ds-tabs__tab { min-height: 44px; padding: 10px 12px; }
        .ds-accordion__panel { padding-left: 16px; }
        .ds-card__content { padding: 16px; }
      }

      /* Figma native-code implementation: navigation and feedback components. */
      /* Figma Date Indicator: 48 × 64, with 16/24 day and 14/22 date type. */
      .ds-date-indicator { box-sizing: border-box; display: flex; width: 48px; height: 64px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font-family: var(--ui-font); }
      .ds-date-indicator__day { font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: .25px; }
      .ds-date-indicator__date { font-size: 14px; font-weight: 500; line-height: 22px; }
      .ds-date-indicator[data-state="Selected"] { border-color: var(--core-brand); background: var(--core-brand); color: #fff; }
      .ds-date-indicator[data-state="Disabled"] { opacity: .4; }
      .ds-breadcrumbs { display: flex; max-width: 100%; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
      .ds-breadcrumbs__item { appearance: none; display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 2px; padding: 4px 8px; border: 0; border-radius: 4px; background: var(--surface); color: var(--text-muted); font-family: var(--ui-font); font-size: 14px; font-weight: 500; line-height: 24px; letter-spacing: .25px; white-space: nowrap; cursor: pointer; }
      .ds-breadcrumbs__item:hover { background: var(--surface-hover); color: var(--text); }
      .ds-breadcrumbs__item[aria-current="page"] { background: color-mix(in srgb, var(--text) 16%, var(--surface)); color: var(--text); }
      .ds-breadcrumbs__home, .ds-breadcrumbs__divider { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; font-size: 16px; color: var(--text-muted); }
      .ds-breadcrumbs[data-variant="Subtle"] .ds-breadcrumbs__item { background: var(--surface-hover); }
      /* Figma: Navigation rail / Top and Center. */
      .ds-navigation-rail { position: relative; box-sizing: border-box; display: flex; width: 96px; min-height: 560px; height: 800px; max-height: 100%; flex-direction: column; align-items: center; gap: 40px; padding: 32px 0 56px; color: var(--figma-text-primary); font-family: var(--ui-font); }
      .ds-navigation-rail[data-alignment="Center"] { justify-content: center; }
      .ds-navigation-rail__button-stack { display: flex; width: 56px; flex-direction: column; align-items: center; gap: 8px; }
      .ds-navigation-rail[data-alignment="Center"] .ds-navigation-rail__button-stack { position: absolute; top: 32px; }
      .ds-navigation-rail__icon-button { appearance: none; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; padding: 12px; border: 0; border-radius: 16px; background: transparent; color: inherit; font-size: 24px; cursor: pointer; }
      .ds-navigation-rail__icon-button--fab { background: var(--figma-button-solid); color: var(--figma-on-solid); box-shadow: inset -1px -1px 4px rgba(0, 38, 153, .9), inset 1px 1px 4px var(--figma-brand-surface); }
      .ds-navigation-rail__items { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
      .ds-navigation-rail__item { appearance: none; display: flex; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border: 0; border-radius: 16px; background: transparent; color: inherit; font-family: inherit; cursor: pointer; }
      .ds-navigation-rail__item:hover { background: color-mix(in srgb, var(--figma-button-solid) 12%, transparent); }
      .ds-navigation-rail__item[aria-current="page"] { background: color-mix(in srgb, var(--figma-button-solid) 16%, transparent); color: var(--figma-button-solid); }
      .ds-navigation-rail__item-icon { display: inline-flex; width: 56px; min-height: 32px; align-items: center; justify-content: center; padding: 4px 8px; font-size: 24px; }
      .ds-navigation-rail__label { min-width: 100%; color: inherit; font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: .5px; text-align: center; }
      /* Figma: Context menu / Segmented and Divider. */
      .ds-context-menu { display: flex; width: min(320px, 100%); flex-direction: column; gap: 4px; box-shadow: var(--figma-shadow-md); font-family: var(--ui-font); }
      .ds-context-menu__container { display: flex; width: 100%; flex-direction: column; gap: 4px; padding: 8px; border-radius: 16px; background: var(--figma-surface-background); }
      .ds-context-menu__section-label { display: flex; width: 100%; align-items: center; min-height: 32px; padding: 6px 12px; color: var(--figma-text-secondary); font-size: 16px; font-weight: 500; line-height: 24px; }
      .ds-context-menu__item { appearance: none; display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 0; border-radius: 12px; background: var(--figma-surface-background); color: var(--figma-text-primary); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; cursor: pointer; }
      .ds-context-menu[data-list="Segmented"] .ds-context-menu__item:hover, .ds-context-menu__item[aria-selected="true"] { background: color-mix(in srgb, var(--figma-button-solid) 12%, var(--figma-surface-background)); }
      .ds-context-menu[data-list="Divider"] .ds-context-menu__item { border-radius: 0; border-bottom: 1px solid var(--border); }
      .ds-context-menu[data-list="Divider"] .ds-context-menu__item:last-child { border-bottom: 0; }
      .ds-context-menu__item-leading, .ds-context-menu__item-actions { display: inline-flex; min-width: 0; align-items: center; gap: 8px; }
      .ds-context-menu__item-leading iconify-icon, .ds-context-menu__item-actions iconify-icon { display: inline-flex; width: 24px; height: 24px; flex: 0 0 auto; align-items: center; justify-content: center; font-size: 24px; }
      .ds-context-menu__item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .ds-context-menu__shortcut { color: var(--figma-text-secondary); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: .5px; }
      @media (max-width: 600px) { .ds-navigation-rail { height: 560px; min-height: 0; padding-bottom: 32px; } }
      .ds-menu-cell { --menu-color: var(--core-brand); box-sizing: border-box; display: flex; width: min(344px, 100%); min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: var(--surface); color: var(--text); font-family: var(--ui-font); cursor: pointer; }
      .ds-menu-cell[data-size="Standard"] { min-height: 40px; padding: 8px 12px; }
      .ds-menu-cell[data-size="Compact"] { min-height: 32px; padding: 4px 8px; }
      .ds-menu-cell[data-type="Tone"] { background: color-mix(in srgb, var(--menu-color) 12%, var(--surface)); }
      .ds-menu-cell[data-selected="true"] { border-color: var(--menu-color); background: color-mix(in srgb, var(--menu-color) 16%, var(--surface)); }
      .ds-menu-cell__lead, .ds-menu-cell__actions, .ds-menu-cell__keys { display: inline-flex; align-items: center; }
      .ds-menu-cell__lead { min-width: 0; gap: 8px; font-size: 16px; line-height: 24px; }
      .ds-menu-cell__lead iconify-icon { flex: 0 0 auto; width: 24px; font-size: 24px; color: var(--menu-color); }
      .ds-menu-cell__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .ds-menu-cell__actions { flex: 0 0 auto; gap: 8px; }
      .ds-menu-cell__keys { gap: 2px; }
      .ds-menu-cell__key { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-hover); color: var(--text-muted); font-size: 11px; font-weight: 600; }
      .ds-menu-cell__trailing { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--text-muted); font-size: 18px; }
      .ds-stepper { display: flex; width: min(620px, 100%); justify-content: center; }
      .ds-stepper[data-orientation="Vertical"] { width: min(300px, 100%); flex-direction: column; align-items: stretch; }
      .ds-stepper__item { appearance: none; position: relative; display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; padding: 4px; border: 0; background: transparent; color: var(--text); font-family: var(--ui-font); text-align: center; cursor: pointer; }
      .ds-stepper__rail { display: flex; width: 100%; align-items: center; justify-content: center; }
      .ds-stepper__connector { height: 1px; flex: 1 1 auto; background: var(--border); }
      .ds-stepper__connector.is-complete { background: var(--core-brand); }
      .ds-stepper__marker { z-index: 1; display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--core-brand); border-radius: 999px; background: var(--surface); color: var(--brand-on-primary, #fff); font-size: 11px; }
      .ds-stepper__item[data-status="Complete"] .ds-stepper__marker, .ds-stepper__item[data-status="Current"] .ds-stepper__marker { background: var(--core-brand); }
      .ds-stepper__item[data-status="Disabled"] { color: var(--text-muted); opacity: .55; }
      .ds-stepper__label { font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: .25px; white-space: nowrap; }
      .ds-stepper__description { color: var(--text-muted); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: .25px; white-space: nowrap; }
      .ds-stepper[data-size="Large"] .ds-stepper__marker { width: 24px; height: 24px; font-size: 14px; }
      .ds-stepper[data-orientation="Vertical"] .ds-stepper__item { flex-direction: row; align-items: flex-start; text-align: left; }
      .ds-stepper[data-orientation="Vertical"] .ds-stepper__rail { width: 24px; height: 100%; flex: 0 0 24px; flex-direction: column; }
      .ds-stepper[data-orientation="Vertical"] .ds-stepper__connector { width: 1px; height: 20px; flex: none; }
      .ds-stepper[data-orientation="Vertical"] .ds-stepper__content { padding-top: 1px; }
      .ds-alert { --alert-color: var(--core-brand); --alert-fg: var(--brand-on-primary, #fff); box-sizing: border-box; display: flex; width: min(880px, 100%); min-height: 64px; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; background: var(--alert-color); color: var(--alert-fg); font-family: var(--ui-font); }
      .ds-alert[data-type="Tonal"] { background: color-mix(in srgb, var(--alert-color) 16%, var(--surface)); color: var(--alert-color); }
      .ds-alert[data-type="Outline"] { border: 1px solid var(--alert-color); background: var(--surface); color: var(--alert-color); }
      .ds-alert[data-type="Ghost"] { background: transparent; color: var(--alert-color); }
      .ds-alert__content { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 12px; }
      .ds-alert__lead { display: inline-flex; flex: 0 0 auto; width: 24px; height: 24px; align-items: center; justify-content: center; font-size: 22px; }
      .ds-alert__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 400; line-height: 24px; white-space: nowrap; }
      .ds-alert__actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; }
      .ds-alert__action { appearance: none; padding: 8px 12px; border: 0; border-radius: 16px; background: var(--surface); color: var(--alert-color); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 24px; cursor: pointer; }
      .ds-alert[data-type="Tonal"] .ds-alert__action, .ds-alert[data-type="Outline"] .ds-alert__action, .ds-alert[data-type="Ghost"] .ds-alert__action { border: 1px solid color-mix(in srgb, var(--alert-color) 28%, transparent); background: transparent; color: inherit; }
      .ds-alert__dismiss { appearance: none; display: inline-flex; width: 40px; height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 8px; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
      .ds-divider { --divider-color: var(--core-brand); display: flex; width: min(400px, 100%); align-items: center; gap: 8px; color: var(--divider-color); }
      .ds-divider::before, .ds-divider::after { display: block; height: 1px; flex: 1 1 auto; background: var(--divider-color); content: ""; }
      .ds-divider[data-style="Dash"]::before, .ds-divider[data-style="Dash"]::after { background: repeating-linear-gradient(90deg, var(--divider-color) 0 6px, transparent 6px 10px); }
      .ds-divider[data-style="Dot"]::before, .ds-divider[data-style="Dot"]::after { background: repeating-linear-gradient(90deg, var(--divider-color) 0 2px, transparent 2px 6px); }
      .ds-divider[data-style="Fade"]::before, .ds-divider[data-style="Fade"]::after { background: linear-gradient(90deg, transparent, var(--divider-color), transparent); }
      .ds-divider[data-text="false"]::after, .ds-divider[data-text="false"]::before { flex-basis: 100%; }
      .ds-divider__text { flex: 0 0 auto; font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: .25px; }
      .ds-divider[data-orientation="Vertical"] { width: 1px; height: 120px; }
      .ds-divider[data-orientation="Vertical"]::before, .ds-divider[data-orientation="Vertical"]::after { width: 1px; height: auto; flex: 1 1 auto; }
      .ds-divider[data-orientation="Vertical"] .ds-divider__text { writing-mode: vertical-rl; }
      .ds-tooltip-demo { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
      .ds-tooltip-target { appearance: none; display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-family: var(--ui-font); cursor: pointer; }
      .ds-tooltip { position: relative; z-index: 1; display: inline-flex; max-width: 240px; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 4px; background: var(--surface); color: var(--text); box-shadow: 0 4px 4px rgba(0,0,0,.16); font-family: var(--ui-font); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: .25px; white-space: nowrap; }
      .ds-tooltip[data-tone="Dark"] { background: var(--text); color: var(--bg-main); }
      .ds-tooltip[data-arrow="Bottom Center"]::after, .ds-tooltip[data-arrow="Top Center"]::after { position: absolute; left: 50%; width: 8px; height: 8px; background: inherit; content: ""; transform: translateX(-50%) rotate(45deg); }
      .ds-tooltip[data-arrow="Bottom Center"]::after { bottom: -4px; }
      .ds-tooltip[data-arrow="Top Center"]::after { top: -4px; }
      @media (max-width: 600px) {
        .ds-alert { align-items: flex-start; flex-wrap: wrap; }
        .ds-alert__content { min-width: calc(100% - 40px); }
        .ds-alert__actions { padding-left: 36px; }
        .ds-stepper { justify-content: flex-start; overflow-x: auto; }
      }

      /* Figma native-code implementation: status, text, overlays and lists. */
      .ds-status-indicator { --status-color: #16a36a; display: inline-flex; min-height: 24px; align-items: center; justify-content: center; gap: 6px; padding: 2px 8px; border: 1px solid transparent; border-radius: 24px; background: transparent; color: var(--status-color); font-family: var(--ui-font); font-size: 12px; font-weight: 500; line-height: 20px; letter-spacing: .5px; }
      .ds-status-indicator[data-size="Small"] { min-height: 20px; gap: 4px; padding: 1px 6px; font-size: 10px; line-height: 18px; }
      .ds-status-indicator[data-size="Large"] { min-height: 32px; gap: 8px; padding: 4px 12px; font-size: 14px; line-height: 24px; }
      .ds-status-indicator[data-type="Filled"] { background: var(--status-color); color: var(--status-fg); }
      .ds-status-indicator[data-type="Tonal"], .ds-status-indicator[data-type="Tonal Outline"] { background: color-mix(in srgb, var(--status-color) 16%, var(--surface)); }
      .ds-status-indicator[data-type="Outline"], .ds-status-indicator[data-type="Tonal Outline"] { border-color: var(--status-color); }
      .ds-status-indicator__icon { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; font-size: 16px; }
      .ds-link-text { position: relative; display: inline-flex; align-items: center; min-height: 22px; border: 0; background: transparent; color: var(--text); font-family: var(--ui-font); font-size: 14px; font-weight: 400; line-height: 22px; letter-spacing: .25px; cursor: pointer; }
      .ds-link-text::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--core-brand); content: ""; transform: scaleX(0); transform-origin: left; }
      .ds-link-text[data-type="Always"]::after, .ds-link-text[data-type="Default"]:focus-visible::after, .ds-link-text[data-type="On hover"]:hover::after { transform: scaleX(1); }
      .ds-link-text[data-type="no underline"]::after { display: none; }
      .ds-modal-demo { display: flex; min-height: 260px; align-items: center; justify-content: center; }
      .ds-modal { box-sizing: border-box; display: flex; width: min(450px, 100%); flex-direction: column; align-items: center; gap: 16px; padding: 32px; border-radius: 16px; background: var(--figma-surface-card-modal); color: var(--figma-text-primary); box-shadow: var(--figma-shadow-md); font-family: var(--ui-font); text-align: center; }
      .ds-modal[data-size="Default"] { width: min(400px, 100%); padding: 24px; }
      .ds-modal[data-type="Drawer"] { align-items: flex-start; border-radius: 16px 0 0 16px; text-align: left; }
      .ds-modal__icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; color: var(--core-brand); font-size: 32px; }
      .ds-modal__title { width: 100%; font-size: 24px; font-weight: 500; line-height: 32px; }
      .ds-modal__description { width: 100%; color: var(--figma-text-secondary); font-size: 16px; line-height: 24px; }
      .ds-modal__divider { width: 100%; border-top: 1px solid var(--border); }
      .ds-modal__actions { display: flex; width: 100%; flex-direction: column; gap: 12px; }
      .ds-modal[data-orientation="Horizontal"] .ds-modal__actions { flex-direction: row-reverse; }
      .ds-modal__button { appearance: none; display: inline-flex; min-height: 48px; flex: 1 1 auto; align-items: center; justify-content: center; padding: 12px 16px; border: 0; border-radius: 16px; background: var(--figma-button-solid); color: var(--figma-on-solid); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 24px; cursor: pointer; }
      .ds-modal__button--secondary { border: 1px solid var(--border); background: transparent; color: var(--figma-text-primary); }
      .ds-toast { --notice-color: var(--text-muted); --notice-fg: var(--bg-main); box-sizing: border-box; display: flex; width: min(319px, 100%); min-height: 68px; align-items: flex-start; gap: 12px; padding: 12px 16px; border: 1px solid transparent; border-radius: 12px; background: var(--notice-color); color: var(--notice-fg); box-shadow: 0 8px 8px rgba(0,0,0,.16); font-family: var(--ui-font); }
      .ds-toast[data-type="Tone"] { background: color-mix(in srgb, var(--notice-color) 16%, var(--surface)); color: var(--notice-color); }
      .ds-toast[data-type="Outline"] { border-color: var(--notice-color); background: var(--surface); color: var(--notice-color); }
      .ds-toast__icon { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; align-items: center; justify-content: center; font-size: 20px; }
      .ds-toast__content { min-width: 0; flex: 1 1 auto; }
      .ds-toast__title { font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: .25px; }
      .ds-toast__description { margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 20px; letter-spacing: .5px; }
      .ds-toast__close { appearance: none; display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
      .ds-snackbar { --snack-color: var(--text-muted); --snack-fg: var(--bg-main); box-sizing: border-box; display: flex; min-height: 40px; align-items: center; gap: 16px; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; background: var(--snack-color); color: var(--snack-fg); box-shadow: 0 8px 8px rgba(0,0,0,.16); font-family: var(--ui-font); }
      .ds-snackbar[data-type="Tone"] { background: color-mix(in srgb, var(--snack-color) 16%, var(--surface)); color: var(--snack-color); }
      .ds-snackbar[data-type="Outline"] { border-color: var(--snack-color); background: var(--surface); color: var(--snack-color); }
      .ds-snackbar__message { display: inline-flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; white-space: nowrap; }
      .ds-snackbar__actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
      .ds-snackbar__action { appearance: none; padding: 0 6px; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: 16px; line-height: 24px; cursor: pointer; }
      .ds-snackbar__close { appearance: none; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
      .ds-list { display: flex; width: min(280px, 100%); flex-direction: column; }
      .ds-list[data-type="Segmented (filled)"] { gap: 8px; padding: 8px; border-radius: 16px; background: var(--surface-hover); }
      .ds-list__item { appearance: none; display: flex; width: 100%; min-height: 48px; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--text); font-family: var(--ui-font); text-align: left; cursor: pointer; }
      .ds-list[data-divider="false"] .ds-list__item { border-bottom-color: transparent; }
      .ds-list[data-type="Segmented (filled)"] .ds-list__item { border: 0; background: var(--surface); }
      .ds-list__item[aria-selected="true"] { background: color-mix(in srgb, var(--core-brand) 12%, var(--surface)); }
      .ds-list__leading { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; align-items: center; justify-content: center; color: var(--core-brand); font-size: 20px; }
      .ds-list__content { min-width: 0; flex: 1 1 auto; }
      .ds-list__label { font-size: 16px; font-weight: 500; line-height: 24px; }
      .ds-list__supporting { margin-top: 2px; color: var(--text-muted); font-size: 12px; line-height: 20px; }
      .ds-list__trailing { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; line-height: 22px; }

      .component-playground {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-width: 0;
      }
      .playground-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }
      .playground-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text);
      }
      .playground-reset {
        appearance: none;
        border: 1px solid var(--border);
        background: var(--bg-main);
        color: var(--text);
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        font-family: var(--ui-font);
        cursor: pointer;
      }
      .playground-grid {
        display: grid;
        grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
        gap: 1.5rem;
      }
      .playground-controls,
      .playground-preview {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-main);
        overflow: hidden;
        min-width: 0;
      }
      .playground-control-row {
        display: grid;
        grid-template-columns: 130px 1fr;
        gap: 1rem;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
      }
      .playground-control-row:last-child {
        border-bottom: none;
      }
      .playground-control-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text);
      }
      .playground-options {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .playground-option {
        appearance: none;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: 7px;
        padding: 0.45rem 0.7rem;
        font-family: var(--ui-font);
        font-size: 0.8rem;
        cursor: pointer;
        transition:
          border-color 0.2s ease,
          background 0.2s ease,
          color 0.2s ease;
      }
      .playground-option.active {
        border-color: var(--text);
        background: var(--text);
        color: var(--bg-main);
      }
      .playground-text-input {
        max-width: none;
        min-width: 0;
      }
      .playground-toggle-wrap {
        display: flex;
        justify-content: flex-end;
      }
      .component-stage {
        min-height: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
        background: var(--surface);
      }
      .component-url-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-main);
        padding: 0.85rem 1rem;
        min-width: 0;
      }
      .component-url-label {
        font-family: monospace;
        font-size: 0.75rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .component-url-value {
        font-family: monospace;
        font-size: 0.78rem;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .component-copy-btn {
        margin-left: auto;
        appearance: none;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: 7px;
        padding: 0.45rem 0.75rem;
        cursor: pointer;
      }
      .component-section-heading {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin: 1rem 0;
      }
      .component-section-heading h2 {
        font-size: 1.25rem;
        color: var(--text);
        white-space: nowrap;
      }
      .component-section-heading::after {
        content: "";
        height: 1px;
        background: var(--border);
        flex: 1;
      }
      .props-table {
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        background: var(--bg-main);
      }
      .props-table table {
        min-width: 760px;
      }
      .style-spec-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
      }
      .style-spec-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-main);
        overflow: hidden;
      }
      .style-spec-header {
        padding: 1rem 1.25rem;
        background: var(--surface-hover);
        border-bottom: 1px solid var(--border);
        font-weight: 600;
        color: var(--text);
      }
      .style-spec-list {
        display: flex;
        flex-direction: column;
      }
      .style-spec-row {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border);
      }
      .style-spec-row:last-child {
        border-bottom: none;
      }
      .style-spec-name {
        font-weight: 600;
        color: var(--text);
        font-size: 0.875rem;
      }
      .style-spec-value {
        color: var(--text-muted);
        font-size: 0.85rem;
        line-height: 1.5;
        word-break: break-word;
      }
      .guideline-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
      }
      .guideline-card {
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-main);
        padding: 1.5rem;
      }
      .guideline-card h3 {
        font-size: 0.85rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 1rem;
      }
      .guideline-card.use h3 {
        color: #65d88a;
      }
      .guideline-card.avoid h3 {
        color: #ff8585;
      }
      .guideline-card ul {
        padding-left: 1.2rem;
        color: var(--text);
        line-height: 1.7;
        font-size: 0.9rem;
      }

      .ds-social-button {
        --social-bg: var(--surface);
        --social-fg: var(--text);
        --social-border: var(--border);
        appearance: none;
        border: 1px solid var(--social-border);
        background: var(--social-bg);
        color: var(--social-fg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-radius: 12px;
        padding: 12px 16px;
        min-height: 44px;
        font-family: var(--token-font);
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0.5px;
        font-weight: 500;
        white-space: nowrap;
        transition:
          transform 0.15s ease,
          opacity 0.15s ease,
          background 0.15s ease;
      }
      .ds-social-button[data-size="Large"] {
        min-height: 48px;
        padding: 12px 18px;
        font-size: 14px;
        line-height: 22px;
      }
      .ds-social-button[data-state="Hover"] {
        --social-bg: var(--surface-hover);
        transform: translateY(-1px);
      }
      .ds-social-button[data-state="Pressed"] {
        --social-bg: var(--surface-pressed);
        transform: translateY(1px);
      }
      .ds-social-button[data-state="Focus"] {
        outline: 2px solid var(--brand-primary);
        outline-offset: 3px;
      }
      .ds-social-button[data-state="Disabled"] {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .ds-social-button[data-shadow="True"] {
        box-shadow:
          0 0 0.5px rgba(29, 18, 29, 0.12),
          0 2px 0.5px rgba(29, 18, 29, 0.08),
          0 1px 2px rgba(29, 18, 29, 0.06);
      }
      .ds-social-icon {
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 20px;
        color: inherit;
      }

      @media (max-width: 1100px) {
        .token-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 1.5rem;
        }
        .token-right {
          width: 100%;
          justify-content: flex-start;
          gap: 1.5rem;
        }
        .spacing-visual-container {
          width: 100%;
          justify-content: flex-start;
          flex: 1;
        }
        .type-props-grid {
          grid-template-columns: repeat(2, 1fr);
          width: 100%;
          gap: 1.5rem;
        }
        .semantic-row {
          grid-template-columns: 1fr;
          gap: 1rem;
        }
        .button-doc-grid {
          grid-template-columns: 1fr;
        }
        .components-shell,
        .playground-grid,
        .guideline-grid,
        .style-spec-grid {
          grid-template-columns: 1fr;
        }
        .component-tree {
          position: relative;
        }
        .type-hero h1 {
          font-size: 4rem;
        }
      }
      @media (max-width: 900px) {
        .sidebar {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          margin: 0;
          border-radius: 0;
          height: 100vh;
          border: none;
          border-right: 1px solid var(--border);
          transform: translateX(-100%);
          width: 260px !important;
          z-index: 1000 !important;
        }
        .sidebar.open {
          transform: translateX(0);
          box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
        }
        .sidebar .brand-title,
        .sidebar .nav-text {
          opacity: 1 !important;
          display: flex !important;
        }
        .sidebar .sidebar-header {
          justify-content: space-between !important;
          padding: 12px 16px !important;
        }
        .main-content {
          margin: 0;
          border-radius: 0;
          border: none;
        }
        .top-nav {
          border-radius: 0;
          justify-content: space-between;
        }
        .top-nav .menu-toggle {
          display: flex;
          margin-right: 0;
        }
        .config-bar {
          border-radius: 0;
        }
        .mobile-overlay.visible {
          display: block;
          opacity: 1;
          z-index: 900 !important;
        }
        .config-bar {
          padding: 1rem;
          gap: 1rem;
        }
        .doc-scroll-area {
          padding: 1.5rem 1rem 5rem 1rem;
        }
        .type-hero h1 {
          font-size: 3rem;
        }
        .icon-btn,
        .pill-btn,
        .select-trigger,
        .select-option,
        .nav-item {
          min-height: 48px !important;
        }
        .icon-btn {
          min-width: 48px !important;
        }
        .custom-select .select-trigger {
          height: auto;
        }
        .sidebar .nav-item {
          justify-content: flex-start !important;
          padding: 12px 16px !important;
        }
      }
      @media (max-width: 600px) {
        #icon-style-segment {
          flex: 1 1 0;
          min-width: 0;
          width: auto;
        }
        #icon-style-segment .pill-btn {
          padding: 6px 12px;
        }
        .config-group {
          flex: 1 1 100%;
          width: 100%;
        }
        .custom-select {
          max-width: none;
          width: 100%;
        }
        .select-dropdown {
          width: 100%;
          left: 0;
          max-height: 250px;
        }
        .format-columns .color-family {
          min-width: 100%;
          flex: 1 1 auto;
        }
        .type-props-grid {
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
        }
        .playground-control-row {
          grid-template-columns: 1fr;
        }
        .style-spec-row {
          grid-template-columns: 1fr;
        }
        .playground-options,
        .playground-toggle-wrap {
          justify-content: flex-start;
        }
        .component-stage {
          min-height: 260px;
        }
      }

      /* ===== HeroUI-inspired docs refresh: calm, crisp, and component-first ===== */
      :root {
        --docs-radius: 14px;
        --docs-radius-sm: 10px;
        --docs-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
        --docs-shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.12);
        --docs-ring: color-mix(in srgb, var(--brand-primary) 24%, transparent);
      }

      [data-theme="light"] {
        --bg-main: #f7f7f8;
        --surface: #ffffff;
        --surface-hover: #f4f4f5;
        --segment-track: #f2f2f3;
        --border: #e4e4e7;
        --text: #09090b;
        --text-muted: #71717a;
        --sidebar-glass: rgba(255, 255, 255, 0.92);
        --sidebar-border: #e4e4e7;
      }

      [data-theme="dark"] {
        --bg-main: #09090b;
        --surface: #111113;
        --surface-hover: #18181b;
        --segment-track: #18181b;
        --border: #27272a;
        --text: #fafafa;
        --text-muted: #a1a1aa;
        --sidebar-glass: rgba(17, 17, 19, 0.92);
        --sidebar-border: #27272a;
      }

      body {
        background:
          linear-gradient(var(--border) 1px, transparent 1px),
          linear-gradient(90deg, var(--border) 1px, transparent 1px),
          var(--bg-main);
        background-size: 64px 64px;
        background-position: -1px -1px;
      }

      [data-theme="dark"] body {
        background:
          linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          var(--bg-main);
        background-size: 64px 64px;
        background-position: -1px -1px;
      }

      .app-layout {
        background: transparent;
        gap: 0;
      }

      .sidebar {
        border-radius: 0;
        border-width: 0 1px 0 0;
        margin: 0;
        padding: 18px 14px;
        background: var(--sidebar-glass);
        box-shadow: none;
      }

      .sidebar-header {
        margin-bottom: 14px;
        padding: 8px 10px;
      }

      .brand-title {
        color: var(--text);
        font-weight: 700;
      }

      .nav-item,
      .sidebar .nav-group-trigger {
        border-radius: 10px;
        min-height: 42px;
        padding: 10px 12px;
      }

      .sidebar .sidebar-nested {
        padding: 4px 8px;
      }

      .sidebar .sidebar-nested-item {
        border-radius: 9px;
        padding: 8px 10px;
      }

      [data-theme="light"] .nav-item.active,
      [data-theme="dark"] .nav-item.active,
      [data-theme="light"] .sidebar .sidebar-nested-item.active,
      [data-theme="dark"] .sidebar .sidebar-nested-item.active {
        background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
        border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border));
        box-shadow: none;
      }

      .main-content {
        margin: 0;
        border: none;
        border-radius: 0;
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        box-shadow: none;
        overflow: hidden;
      }

      .top-nav {
        background: color-mix(in srgb, var(--surface) 90%, transparent);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 0;
      }

      .config-bar {
        background: color-mix(in srgb, var(--surface) 92%, transparent);z-index: 400;
      }

      .pill-btn.active,
      .playground-option.active {
        background: var(--text);
        color: #000000;
        box-shadow: none;
      }

      [data-theme="light"] .pill-btn.active,
      [data-theme="light"] .playground-option.active {
        color: #ffffff;
      }

      .doc-scroll-area {
        background: transparent;
        padding-top: 3rem;
      }

      .page-hero {
        position: relative;
        padding: 0 0 2rem;
        border-bottom: 1px solid var(--border);
      }

      .page-title {
        font-size: clamp(2.25rem, 5vw, 4.5rem);
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.05;
        max-width: 820px;
      }

      .page-desc {
        max-width: 720px;
        color: var(--text-muted);
        font-size: 1rem;
      }

      .overview-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 1rem;
        color: var(--brand-primary);
        font-size: 0.82rem;
        font-weight: 700;
      }

      .overview-kicker::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--brand-primary);
      }

      .overview-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-top: 1.5rem;
      }

      .overview-action {
        appearance: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        border-radius: 999px;
        padding: 0.7rem 1rem;
        font-family: var(--ui-font);
        font-weight: 600;
        font-size: 0.9rem;
      }

      .overview-action.primary {
        background: var(--text);
        color: var(--bg-main);
        border-color: var(--text);
      }

      .overview-panel {
        margin: 2rem 0 1rem;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
        gap: 1rem;
      }

      .overview-card,
      .overview-demo,
      .overview-stat,
      .overview-chip-card {
        border: 1px solid var(--border);
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        border-radius: var(--docs-radius);
      }

      .overview-card {
        padding: 1.25rem;
        min-height: 180px;
      }

      .overview-card h2 {
        font-size: 1.05rem;
        margin-bottom: 0.5rem;
      }

      .overview-card p,
      .overview-stat span,
      .overview-chip-card span {
        color: var(--text-muted);
        font-size: 0.9rem;
      }

      .overview-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1.25rem;
      }

      .overview-stat {
        padding: 1rem;
      }

      .overview-stat strong {
        display: block;
        font-size: 1.4rem;
        color: var(--text);
      }

      .overview-demo {
        display: grid;
        gap: 0.75rem;
        padding: 1rem;
      }

      .overview-demo-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        flex-wrap: wrap;
      }

      .overview-demo-title {
        font-weight: 700;
      }

      .overview-demo-badge {
        border-radius: 999px;
        background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
        color: var(--brand-primary);
        border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border));
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
        font-weight: 700;
      }

      .overview-theme-control {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--segment-track);
      }

      .overview-theme-btn {
        appearance: none;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--text-muted);
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-height: 32px;
        padding: 0 0.75rem;
        font-family: var(--ui-font);
        font-size: 0.82rem;
        font-weight: 650;
        cursor: pointer;
        transition:
          background 0.2s ease,
          color 0.2s ease,
          opacity 0.2s ease;
      }

      .overview-theme-btn iconify-icon {
        font-size: 1rem;
      }

      .overview-theme-btn:hover {
        color: var(--text);
      }

      .overview-theme-btn.active {
        background: var(--surface);
        color: var(--text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
      }

      .overview-theme-control[data-forced="true"] {
        opacity: 0.55;
      }

      .overview-theme-control[data-forced="true"] .overview-theme-btn {
        cursor: not-allowed;
      }

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

      .overview-chip-card {
        padding: 0.9rem;
      }

      .overview-chip-card strong {
        display: block;
        margin-bottom: 0.25rem;
      }

      .token-row,
      .doc-card,
      .component-url-row,
      .style-spec-card,
      .guideline-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--docs-radius);
      }

      .token-row {
        padding: 1.2rem;
        margin-bottom: 0.7rem;
      }

      .token-row:last-child {
        border-bottom: 1px solid var(--border);
      }

      .code-badge {
        background: var(--segment-track);
        border-color: var(--border);
      }

      .bento-category-title {
        border-bottom: 1px solid var(--border);
        margin: 3rem 0 1rem;
        padding-bottom: 0.9rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        font-size: 1.35rem;
      }

      .bento-category-title::after {
        content: "Browse";
        color: var(--text-muted);
        font-size: 0.78rem;
        font-weight: 600;
      }

      .bento-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
      }

      .bento-preview-box {
        height: 210px;
        border-radius: var(--docs-radius);
        background:
          linear-gradient(var(--border) 1px, transparent 1px),
          linear-gradient(90deg, var(--border) 1px, transparent 1px),
          var(--surface);
        background-size: 28px 28px;
        box-shadow: none;
      }

      .bento-preview-box::before {
        content: "";
        position: absolute;
        inset: 0px;
        background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-main) 55%, transparent));
        pointer-events: none;
      }

      .bento-preview-inner {
        position: relative;
        z-index: 1;
      }

      .bento-item {
        transition:
          transform 0.25s ease,
          color 0.25s ease;
      }

      .bento-item:hover {
        transform: translateY(-3px);
      }

      .bento-item:hover .bento-preview-box {
        border-color: color-mix(in srgb, var(--text) 26%, var(--border));
        box-shadow: var(--docs-shadow);
      }

      .bento-label {
        font-size: 0.95rem;
        font-weight: 650;
        padding-left: 0.1rem;
      }

      .component-tree {
        top: 1rem;
        border-radius: var(--docs-radius);
        background: var(--surface);
      }

      .component-tree-item.active {
        background: var(--surface-hover);
        border-color: var(--border);
        color: var(--text);
        box-shadow: inset 3px 0 0 var(--brand-primary);
      }

      .playground-controls,
      .playground-preview,
      .component-stage,
      .props-table,
      .icon-card,
      .button-variant-card {
        border-radius: var(--docs-radius);
      }

      .component-stage {
        background:
          linear-gradient(var(--border) 1px, transparent 1px),
          linear-gradient(90deg, var(--border) 1px, transparent 1px),
          var(--surface);
        background-size: 32px 32px;
      }

      .playground-header {
        padding: 0.25rem 0.25rem 0;
      }

      .playground-title {
        font-size: 1.35rem;
      }

      .playground-reset,
      .component-copy-btn {
        transition:
          transform 0.2s ease,
          border-color 0.2s ease,
          background 0.2s ease;
      }

      .playground-reset:hover,
      .component-copy-btn:hover {
        transform: translateY(-1px);
        background: var(--surface-hover);
      }

      .icon-toolbar {
        border-radius: var(--docs-radius);
        box-shadow: var(--docs-shadow);
      }

      .icon-card {
        background: var(--surface);
      }

      .icon-card:hover {
        border-color: color-mix(in srgb, var(--text) 26%, var(--border));
        box-shadow: var(--docs-shadow);
      }

      table th {
        background: var(--segment-track);
      }

      /* ===== Complete docs revamp: clearer IA, softer grid, stronger overview ===== */
      :root {
        --docs-grid-light: rgba(9, 9, 11, 0.035);
        --docs-grid-dark: rgba(255, 255, 255, 0.025);
        --docs-elevated: 0 12px 32px rgba(0, 0, 0, 0.08);
      }

      body {
        background:
          linear-gradient(var(--docs-grid-light) 1px, transparent 1px),
          linear-gradient(90deg, var(--docs-grid-light) 1px, transparent 1px),
          var(--bg-main);
        background-size: 72px 72px;
      }

      [data-theme="dark"] body {
        background:
          linear-gradient(var(--docs-grid-dark) 1px, transparent 1px),
          linear-gradient(90deg, var(--docs-grid-dark) 1px, transparent 1px),
          var(--bg-main);
        background-size: 72px 72px;
      }

      .sidebar {
        width: 288px;
        padding: 20px 16px;
      }

      .brand-title {
        font-size: 0.98rem;
      }

      .brand-title span {
        letter-spacing: 0;
      }

      .nav-item,
      .sidebar .nav-group-trigger,
      .sidebar .sidebar-nested-item {
        font-size: 0.88rem;
        font-weight: 560;
        color: var(--text-muted);
      }

      .nav-item:hover,
      .sidebar .nav-group-trigger:hover,
      .sidebar .sidebar-nested-item:hover {
        background: var(--surface-hover);
        color: var(--text);
      }

      .nav-item.active::before,
      .sidebar .sidebar-nested-item.active::before {
        content: "";
        width: 3px;
        height: 18px;
        border-radius: 999px;
        background: var(--brand-primary);
        position: absolute;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
      }

      .main-content {
        background: color-mix(in srgb, var(--surface) 86%, transparent);
      }

      .top-nav {
        min-height: 58px;
        height: 58px;
        padding: 0 1.25rem;
      }

      .doc-scroll-area {
        padding: 2.5rem clamp(1.25rem, 4vw, 4rem) 6rem;
      }

      .doc-container {
        max-width: 1180px;
      }

      #all-components-section .page-hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2rem;
        align-items: end;
        padding-bottom: 1.75rem;
      }

      #all-components-section .page-title {
        max-width: 760px;
        font-size: clamp(2.4rem, 5vw, 4.8rem);
      }

      .overview-actions {
        align-self: end;
        justify-content: flex-end;
        margin-top: 0;
      }

      .overview-action {
        cursor: pointer;
        user-select: none;
        transition:
          transform 0.18s ease,
          background 0.18s ease,
          border-color 0.18s ease;
      }

      .overview-action:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--text) 22%, var(--border));
      }

      .overview-action.primary:hover {
        background: color-mix(in srgb, var(--text) 88%, var(--brand-primary) 12%);
      }

      .overview-panel {
        grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
        gap: 1.25rem;
        margin: 1.5rem 0;
      }

      .overview-card,
      .overview-demo,
      .overview-stat,
      .overview-chip-card {
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        box-shadow: none;
      }

      .overview-card,
      .overview-demo {
        padding: 1.25rem;
      }

      .overview-card h2,
      .overview-demo-title {
        font-size: 1rem;
      }

      .overview-card p {
        max-width: 620px;
      }

      .overview-stat,
      .overview-chip-card {
        border-radius: 12px;
      }

      .overview-chip-card {
        min-height: 112px;
        transition:
          border-color 0.18s ease,
          background 0.18s ease;
      }

      .overview-chip-card:hover {
        background: var(--surface-hover);
        border-color: color-mix(in srgb, var(--text) 18%, var(--border));
      }

      .overview-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: 2rem 0 0.5rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: var(--docs-radius);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
      }

      .overview-search {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        flex: 1;
        min-width: 220px;
        height: 42px;
        padding: 0 0.85rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-main);
        color: var(--text-muted);
      }

      .overview-search iconify-icon {
        font-size: 1.1rem;
      }

      .overview-search input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 0.9rem;
      }

      .overview-search:focus-within {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 4px var(--docs-ring);
      }

      .overview-toolbar-meta {
        color: var(--text-muted);
        font-size: 0.86rem;
        white-space: nowrap;
      }

      .bento-category-title {
        font-size: 1.05rem;
        margin: 2.25rem 0 0.9rem;
        padding-bottom: 0.75rem;
      }

      .bento-category-title::after {
        content: "";
      }

      .bento-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.9rem;
      }

      .bento-item {
        gap: 0.7rem;
      }

      .bento-preview-box {
        height: 176px;
        background:
          linear-gradient(rgba(9, 9, 11, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(9, 9, 11, 0.025) 1px, transparent 1px),
          var(--surface);
        background-size: 32px 32px;
      }

      [data-theme="dark"] .bento-preview-box {
        background:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          var(--surface);
        background-size: 32px 32px;
      }

      .bento-preview-box::before {
        opacity: 0.45;
      }

      .component-stage {
        background:
          linear-gradient(rgba(9, 9, 11, 0.026) 1px, transparent 1px),
          linear-gradient(90deg, rgba(9, 9, 11, 0.026) 1px, transparent 1px),
          var(--surface);
        background-size: 36px 36px;
      }

      [data-theme="dark"] .component-stage {
        background:
          linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
          var(--surface);
        background-size: 36px 36px;
      }

      .bento-item[hidden],
      .bento-category-title[hidden],
      .bento-grid[hidden] {
        display: none !important;
      }

      .component-tree,
      .playground-controls,
      .playground-preview,
      .props-table,
      .style-spec-card,
      .guideline-card,
      .doc-card,
      .icon-toolbar {
        box-shadow: none;
      }

      /* ===== Overview landing page inspired by modern UI-library showcases ===== */
      #all-components-section {
        color-scheme: dark;
      }

      #all-components-section .home-hero,
      #all-components-section .home-showcase,
      #all-components-section .overview-toolbar,
      #all-components-section #all-components-wrapper {
        max-width: 1220px;
        margin-left: auto;
        margin-right: auto;
      }

      .home-hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 3.25rem 1rem 2.25rem;
      }

      .home-release-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        background: rgba(24, 77, 238, 0.14);
        border: 1px solid rgba(59, 130, 246, 0.22);
        color: #60a5fa;
        font-size: 0.78rem;
        font-weight: 500;
        margin-bottom: 1rem;
      }

      .home-hero h1 {
        margin: 0;
        max-width: 760px;
        color: var(--text);
        font-size: clamp(2.6rem, 6.2vw, 4.9rem);
        line-height: 0.98;
        letter-spacing: 0;
        font-weight: 780;
      }

      .home-hero h1 span {
        display: block;
        color: var(--text);
      }

      .home-hero p {
        max-width: 680px;
        margin: 1rem 0 0;
        color: var(--text-secondary);
        font-size: clamp(1rem, 2vw, 1.18rem);
        line-height: 1.55;
      }

      .home-hero-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        flex-wrap: wrap;
        margin-top: 1.35rem;
      }

      .home-primary-btn,
      .home-secondary-btn {
        appearance: none;
        border-radius: 999px;
        min-height: 42px;
        padding: 0 1.15rem;
        border: 1px solid rgba(255, 255, 255, 0.14);
        font-family: var(--ui-font);
        font-size: 0.92rem;
        font-weight: 720;
        cursor: pointer;
      }

      .home-primary-btn {
        background: #1993ff;
        color: #ffffff;
        border-color: #1993ff;
      }

      .home-secondary-btn {
        background: rgba(255, 255, 255, 0.02);
        color: #ffffff;
      }

      .home-stars {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        color: #8c8c96;
        font-size: 0.84rem;
      }

      .home-showcase {
        margin-top: 1.35rem;
      }

      .home-showcase-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
      }

      .home-showcase-tabs {
        display: inline-flex;
        gap: 0.2rem;
        padding: 0.25rem;
        border-radius: 999px;
        background: #25252b;
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .home-showcase-tabs button {
        appearance: none;
        border: 0;
        background: transparent;
        color: #a1a1aa;
        min-height: 34px;
        padding: 0 1rem;
        border-radius: 999px;
        font-family: var(--ui-font);
        font-size: 0.9rem;
        font-weight: 650;
      }

      .home-showcase-tabs button.active {
        background: #4a4a52;
        color: #ffffff;
      }

      .home-color-dots {
        display: flex;
        align-items: center;
        gap: 0.55rem;
      }

      .home-color-dots button {
        appearance: none;
        padding: 0;
        border: 2px solid transparent;
        background: transparent;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: pointer;
        position: relative;
        transition:
          transform 0.18s ease,
          border-color 0.18s ease,
          box-shadow 0.18s ease;
      }

      .home-color-dots button::before {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: inherit;
        background: var(--swatch, var(--brand-primary));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      }

      .home-color-dots button.mono::before {
        background: linear-gradient(135deg, #ffffff 0 49%, #18181b 50% 100%);
      }

      .home-color-dots button:hover {
        transform: translateY(-1px);
      }

      .home-color-dots button.active {
        border-color: rgba(255, 255, 255, 0.86);
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
      }

.home-preview-grid {
        display: grid;
        grid-template-columns: minmax(240px, 0.9fr) minmax(300px, 1.15fr) minmax(280px, 1fr);
        gap: 1.5rem;
        align-items: start;
        padding: 2rem clamp(1rem, 4vw, 5.5rem);
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--bg-main);
        box-shadow: inset 0 1px 0 var(--sidebar-inner-highlight);
      }

      .home-form-card,
      .home-menu-card,
      .home-social-card,
      .home-credit-card,
      .home-signup-card,
      .home-mini-grid > div,
      .home-dialog {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 22px;
        color: var(--text);
      }

      .home-form-card {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
      }

      .home-form-card label {
        margin-top: 0.35rem;
        font-size: 0.88rem;
        font-weight: 760;
      }

      .home-form-card label span,
      .danger {
        color: var(--brand-primary);
      }

      .home-form-card small,
      .home-verify p,
      .home-social-card small,
      .home-social-card span,
      .home-credit-card small,
      .home-notify small,
      .home-signup-card p,
      .home-signup-card small,
      .home-mini-grid small,
      .home-dialog p {
        color: var(--text-muted);
      }

      .home-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 38px;
        padding: 0 0.8rem;
        border-radius: 12px;
        background: var(--surface-hover);
        color: var(--text-muted);
      }

      .home-component-panel {
        min-width: 0;
        padding: 1rem;
        border-radius: 22px;
        background: var(--surface);
        border: 1px solid var(--border);
        transition:
          opacity 0.2s ease,
          border-color 0.2s ease,
          background 0.2s ease,
          transform 0.2s ease;
      }

      .home-component-panel.is-dim {
        opacity: 0.38;
      }

      .home-component-panel.is-spotlight {
        opacity: 1;
        transform: translateY(-2px);
        border-color: var(--text-muted);
        background: var(--surface-hover);
      }

      .home-color-dots.is-spotlight {
        padding: 0.35rem;
        border-radius: 999px;
        background: var(--sidebar-border);
        box-shadow: inset 0 0 0 1px var(--sidebar-border);
      }

      .home-component-panel.tall {
        min-height: 280px;
      }

      .home-component-panel.compact {
        padding-bottom: 0.85rem;
      }

      .home-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
      }

      .home-panel-header span {
        color: var(--text);
        font-size: 0.88rem;
        font-weight: 760;
      }

      .home-panel-header button {
        appearance: none;
        border: 1px solid var(--border);
        background: var(--surface-hover);
        color: var(--text-muted);
        border-radius: 999px;
        min-height: 28px;
        padding: 0 0.7rem;
        font-family: var(--ui-font);
        font-size: 0.74rem;
        font-weight: 700;
        cursor: pointer;
      }

      .home-panel-header button:hover {
        color: var(--text);
        border-color: var(--text-muted);
      }

      .home-real-stack {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
      }

      .home-real-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
      }

      .home-real-row.center {
        justify-content: center;
      }

      .home-real-button-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, auto));
        justify-content: center;
        gap: 0.7rem;
      }

      .home-real-scale {
        display: flex;
        justify-content: center;
        overflow: hidden;
      }

      .home-real-scale > * {
        transform: scale(0.68);
        transform-origin: top center;
      }

      #overview-real-inputs .ds-input-block,
      #overview-real-inputs .ds-input-action-block,
      #overview-real-inputs .ds-input-cta-block,
      #overview-real-file .ds-file-uploader,
      #overview-real-file .ds-file-status {
        max-width: 100%;
      }

      #overview-real-date .ds-calendar-cell,
      #overview-real-kbd .ds-kbd,
      #overview-real-selection .ds-checkbox,
      #overview-real-selection .ds-radio,
      #overview-real-selection .ds-switch {
        flex-shrink: 0;
      }

      @media (max-width: 1100px) {
        .home-preview-grid {
          grid-template-columns: 1fr;
          padding: 1.25rem;
        }

        .home-showcase-bar {
          flex-direction: column;
          align-items: flex-start;
        }
      }

      @media (max-width: 700px) {
        .home-hero {
          padding-top: 1.75rem;
        }

        .home-showcase-bar {
          flex-direction: column;
          align-items: stretch; /* Stretches the tabs evenly on mobile */
        }

        .home-showcase-tabs {
          width: 100%;
          overflow-x: auto;
          justify-content: flex-start;
        }
      }

      /* ===== Minimal sidebar nav with neutral sliding active state ===== */
      .sidebar {
        position: relative;
      }

      .nav-active-slider {
        position: absolute;
        left: 12px;
        right: 12px;
        top: 0;
        height: 42px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--text) 7%, transparent);
        border: 1px solid color-mix(in srgb, var(--text) 7%, var(--border));
        opacity: 0;
        pointer-events: none;
        transform: translateY(0);
        transition:
          transform 0.24s cubic-bezier(0.2, 0, 0, 1),
          height 0.24s cubic-bezier(0.2, 0, 0, 1),
          opacity 0.18s ease,
          left 0.24s cubic-bezier(0.2, 0, 0, 1),
          right 0.24s cubic-bezier(0.2, 0, 0, 1);
        z-index: 0;
      }

      .nav-item,
      .sidebar .nav-group-trigger,
      .sidebar .sidebar-nested-item {
        z-index: 1;
        border: 1px solid transparent;
        color: var(--text-muted);
        gap: 12px;
      }

      .nav-item iconify-icon,
      .sidebar .nav-group-trigger iconify-icon,
      .sidebar .sidebar-nested-item iconify-icon {
        color: currentColor;
        opacity: 0.86;
      }

      .nav-item:hover,
      .sidebar .nav-group-trigger:hover,
      .sidebar .sidebar-nested-item:hover {
        background: transparent;
        color: var(--text);
      }

      [data-theme="light"] .nav-item.active,
      [data-theme="dark"] .nav-item.active,
      [data-theme="light"] .sidebar .sidebar-nested-item.active,
      [data-theme="dark"] .sidebar .sidebar-nested-item.active {
        background: transparent;
        border-color: transparent;
        color: var(--text);
        box-shadow: none;
      }

      .nav-item.active iconify-icon,
      .sidebar .sidebar-nested-item.active iconify-icon {
        color: var(--text);
      }

      /* Foundation-token routes use their own active treatment. The shared
         slider is suppressed for these routes so they never render as two
         stacked outlines. */
      [data-theme="light"] .sidebar .nav-item[data-target="color-section"].active,
      [data-theme="dark"] .sidebar .nav-item[data-target="color-section"].active,
      [data-theme="light"] .sidebar .nav-item[data-target="semantic-section"].active,
      [data-theme="dark"] .sidebar .nav-item[data-target="semantic-section"].active {
        background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface));
        border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border));
        color: var(--brand-primary);
      }

      .sidebar .nav-item[data-target="color-section"].active iconify-icon,
      .sidebar .nav-item[data-target="semantic-section"].active iconify-icon {
        color: var(--brand-primary);
        opacity: 1;
      }

      .nav-item.active::before,
      .sidebar .sidebar-nested-item.active::before {
        content: none;
      }

      .sidebar .sidebar-nested-item {
        padding-left: 12px;
      }

      .sidebar .sidebar-nested-item::before {
        content: none;
      }

      .sidebar.collapsed .nav-active-slider {
        left: 10px;
        right: 10px;
      }

      @media (max-width: 900px) {
        .sidebar {
          border-radius: 0;
        }

        .overview-panel,
        .overview-chip-grid {
          grid-template-columns: 1fr;
        }

        .overview-metrics {
          grid-template-columns: 1fr;
        }

        #all-components-section .page-hero,
        .overview-toolbar {
          grid-template-columns: 1fr;
          flex-direction: column;
          align-items: stretch;
        }

        .overview-actions {
          justify-content: flex-start;
        }
      }

      /* ===== Rendering and responsive stability fixes ===== */
      html,
      body {
        width: 100%;
        max-width: 100%;
      }

      .app-layout,
      .main-content,
      .doc-scroll-area,
      .doc-container,
      .doc-container section,
      .home-showcase,
      .home-preview-grid,
      .home-component-column,
      .home-component-panel,
      .home-real-stack,
      .playground-grid,
      .playground-controls,
      .playground-preview,
      .component-stage {
        min-width: 0;
      }

      .doc-scroll-area {
        overflow-x: hidden;
      }

      .home-preview-grid {
        width: 100%;
        gap: clamp(1.25rem, 3vw, 2rem);
        grid-template-columns:
          minmax(0, 0.9fr)
          minmax(0, 1.15fr)
          minmax(0, 1fr);
      }

      .home-component-column {
        display: flex;
        flex-direction: column;
        gap: clamp(1.25rem, 2.5vw, 1.75rem);
      }

      .home-component-panel,
      .home-real-stack,
      .home-real-row,
      .home-real-button-grid,
      .overview-toolbar,
      .overview-actions,
      .top-nav,
      .config-bar {
        max-width: 100%;
      }

      .home-component-panel {
        overflow: hidden;
        border-color: color-mix(in srgb, var(--panel-accent, var(--border)) 28%, var(--border));
        box-shadow: inset 0 3px 0 color-mix(in srgb, var(--panel-accent, transparent) 70%, transparent);
      }

      .home-component-column:nth-child(1) .home-component-panel:nth-child(1) { --panel-accent: var(--brand-primary); }
      .home-component-column:nth-child(1) .home-component-panel:nth-child(2) { --panel-accent: #00a86b; }
      .home-component-column:nth-child(1) .home-component-panel:nth-child(3) { --panel-accent: #8b5cf6; }
      .home-component-column:nth-child(2) .home-component-panel:nth-child(1) { --panel-accent: #e5004c; }
      .home-component-column:nth-child(2) .home-component-panel:nth-child(2) { --panel-accent: #00a3a3; }
      .home-component-column:nth-child(2) .home-component-panel:nth-child(3) { --panel-accent: #5f00e5; }
      .home-component-column:nth-child(3) .home-component-panel:nth-child(1) { --panel-accent: #e57300; }
      .home-component-column:nth-child(3) .home-component-panel:nth-child(2) { --panel-accent: #737373; }
      .home-component-column:nth-child(3) .home-component-panel:nth-child(3) { --panel-accent: #0039e5; }
      .home-component-column:nth-child(3) .home-component-panel:nth-child(4) { --panel-accent: #2563eb; }
      .home-component-column:nth-child(3) .home-component-panel:nth-child(5) { --panel-accent: #db2777; }

      #overview-real-core .ds-tabs,
      #overview-real-navigation .ds-breadcrumbs,
      #overview-real-navigation .ds-menu-cell,
      #overview-real-navigation .ds-divider,
      #overview-real-overlays .ds-toast,
      #overview-real-overlays .ds-snackbar,
      #overview-real-overlays .ds-list {
        width: 100%;
        max-width: 100%;
      }
      #overview-real-core .ds-accordion { width: 100%; }
      #overview-real-core .ds-progress { width: 100%; }
      #overview-real-core .ds-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
        overflow: hidden;
      }
      #overview-real-core .ds-tabs__tab {
        width: 100%;
        min-width: 0;
        min-height: 36px;
        gap: 0;
        padding: 6px 4px;
        overflow: hidden;
        font-size: 11px;
        line-height: 16px;
        text-overflow: ellipsis;
      }
      #overview-real-core .ds-tabs__icon { display: none; }
      #overview-real-navigation .ds-breadcrumbs {
        gap: 4px;
        justify-content: flex-start;
        overflow: hidden;
      }
      #overview-real-navigation .ds-breadcrumbs > :nth-child(n + 4) { display: none; }
      #overview-real-navigation .ds-breadcrumbs__item {
        min-height: 28px;
        padding: 2px 4px;
        font-size: 12px;
        line-height: 20px;
      }
      #overview-real-navigation .ds-breadcrumbs__home,
      #overview-real-navigation .ds-breadcrumbs__divider {
        width: 14px;
        height: 14px;
        font-size: 14px;
      }
      #overview-real-overlays .ds-list { transform-origin: top left; }

      .overview-color-stack {
        display: grid;
        gap: 1.25rem;
        padding: 1.5rem;
      }

      .overview-color-group {
        display: grid;
        gap: 0.65rem;
      }

      .overview-color-title {
        color: var(--text-muted);
        font-size: 0.78rem;
        font-weight: 760;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .overview-color-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
        gap: 0.75rem;
      }

      .overview-swatch {
        min-height: 56px;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
        background: var(--swatch);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
      }

      .overview-swatch.is-active {
        box-shadow:
          0 0 0 2px var(--surface),
          0 0 0 4px var(--brand-primary),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
      }

      #overview-real-colors {
        display: block !important;
        padding: 0 !important;
      }
      .nav-active-slider {
        display: none !important;
      }

      [data-theme="light"] .nav-item.active,
      [data-theme="dark"] .nav-item.active,
      [data-theme="light"] .sidebar .sidebar-nested-item.active,
      [data-theme="dark"] .sidebar .sidebar-nested-item.active {
        background: var(--surface-hover);
        border-color: var(--border);
        color: var(--text);
      }

      .nav-item.active iconify-icon,
      .sidebar .sidebar-nested-item.active iconify-icon {
        color: var(--text);
        opacity: 1;
        filter: drop-shadow(0 0 0 currentColor);
      }

      .overview-system-icon {
        width: 36px;
        height: 36px;
        object-fit: contain;
        display: block;
      }
      #desktop-sidebar-toggle {
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: transparent;
        color: var(--text);
      }
      #desktop-sidebar-toggle:hover { background: var(--surface-hover); }
      .sidebar.collapsed #desktop-sidebar-toggle { margin: 0; }
      .component-tree-local-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
        flex: 0 0 auto;
      }

      @media (max-width: 380px) {
        #overview-hero-tabs.ds-segment-control {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          width: 100%;
          border-radius: 28px;
        }

        #overview-hero-tabs .ds-segment-btn {
          width: 100%;
          min-width: 0;
        }
      }

      #overview-real-date {
        align-items: center;
        overflow: hidden;
      }

      #overview-real-date > div {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
      }

      #overview-real-date .ds-idp-wrapper,
      #overview-real-date .ds-mdp-wrapper {
        width: 100%;
        max-width: 100%;
      }

      .home-component-panel {
        container-type: inline-size;
      }

      .ds-idp-wrapper,
      .ds-mdp-wrapper {
        max-width: 100%;
      }

      .ds-idp-header,
      .ds-mdp-header,
      .ds-mdp-controls,
      .ds-mdp-footer,
      .ds-idp-footer {
        min-width: 0;
      }

      .ds-idp-heading,
      .ds-mdp-heading {
        overflow-wrap: anywhere;
      }

      .ds-mdp-weekdays,
      .ds-mdp-days {
        grid-template-columns: repeat(7, minmax(0, 48px));
      }

      .ds-segment-control {
        min-width: 0;
      }

      .ds-segment-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @media (max-width: 1100px) {
        .doc-scroll-area {
          padding-inline: clamp(1rem, 4vw, 2rem);
        }

        .home-preview-grid {
          grid-template-columns: 1fr !important;
          padding: clamp(1rem, 4vw, 1.5rem);
        }
      }

      @media (max-width: 900px) {
        .sidebar {
          position: fixed !important;
          top: 0;
          bottom: 0;
          left: 0;
          width: min(280px, 86vw) !important;
          max-width: 86vw;
          transform: translateX(-100%);
        }

        .sidebar.open {
          transform: translateX(0);
        }

        .main-content {
          width: 100%;
          flex: 1 1 100%;
        }

        /*
         * These are parents of controls whose menus open outside their boxes.
         * `overflow-x: auto` turns the other axis into an auto-scroll area too,
         * which clips an open select menu on mobile (and adds a nested scrollbar).
         */
        .top-nav,
        .config-bar {
          overflow: visible;
          flex-shrink: 0;
        }

        .overview-actions .overview-action,
        .home-hero-actions > * {
          flex: 1 1 auto;
          justify-content: center;
        }
      }

      @media (max-width: 600px) {
        .doc-scroll-area {
          padding: 1.5rem 1rem 5rem 1rem;
        }

        .doc-container {
          width: 100%;
        }

        #all-components-section .page-title,
        .home-hero h1,
        .type-hero h1 {
          font-size: clamp(2.1rem, 12vw, 3rem);
          line-height: 1.05;
        }

        .home-showcase-tabs,
        .ds-segment-control,
        .playground-options {
          width: 100%;
          flex-wrap: wrap;
        }

        .ds-segment-btn,
        .playground-option {
          flex: 1 1 auto;
          min-width: 0;
        }

        .home-real-button-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #overview-real-date .ds-idp-wrapper,
        #overview-real-date .ds-mdp-wrapper {
          width: 100%;
        }

        .ds-idp-header {
          gap: 1rem;
        }

        .ds-idp-heading,
        .ds-mdp-heading {
          font-size: clamp(1.35rem, 8vw, 2rem);
        }

        .ds-idp-footer,
        .ds-mdp-footer,
        .ds-mdp-footer-actions {
          flex-wrap: wrap;
        }
      }

      /* Keep the Components dashboard balanced without forcing cards into
         rows whose tallest card creates empty visual gaps. */
      #overview-tab-components.home-preview-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: flex-start;
        gap: clamp(1.5rem, 2.5vw, 2rem);
      }
      #overview-tab-components .home-component-column {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: clamp(1.25rem, 2vw, 1.75rem);
      }
      #overview-tab-components .home-component-panel {
        width: 100%;
        max-width: none;
        padding: 16px;
      }
      #overview-tab-components .home-panel-header {
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border);
      }
      #overview-tab-components .home-real-stack { gap: 1rem; }
      #overview-tab-components .home-real-row { gap: 16px; }
      #overview-tab-components .home-real-button-grid { gap: 16px; }
      #overview-tab-components .home-component-panel.compact { padding-bottom: 16px; }
      #overview-tab-components .home-component-panel.tall { min-height: 300px; }
      @media (max-width: 1100px) {
        #overview-tab-components.home-preview-grid { grid-template-columns: 1fr !important; }
      }
      @media (max-width: 680px) {
        #overview-tab-components .home-component-panel {
          max-width: none;
          padding: 16px;
        }
      }