@import "./design-variable.css";

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-family-main);
      line-height: 1.6;
      color: var(--gray-3);
      background: var(--gray-1);
    }

    #nav-iframe {
      position: fixed;
      top: 76px;
      left: 16px;
      width: 260px;
      height: calc(100vh - 92px);
      border: none;
      border-radius: var(--border-radius-2r);
      background: transparent;
      overflow: hidden;
      box-shadow: 0 8px 24px var(--shadow);
      z-index: 2100;
    }

    .container {
      max-width: 1200px;
      margin: 60px 0 0 292px;
      padding: 40px 60px;
    }

    .header {
      margin-bottom: 60px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--gray-8);
    }

    .header h1 {
      font-size: 32px;
      font-weight: var(--font-weight-semibold);
      margin-bottom: 12px;
      color: var(--gray-3);
    }

    .header p {
      font-size: 16px;
      color: var(--gray-16);
    }

    .nav {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      padding: 16px 0;
      background: var(--gray-2);
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-4r);
      overflow: hidden;
      box-shadow: none;
    }

    .nav-content {
      height: 100%;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    .nav::before,
    .nav::after {
      content: "";
      position: absolute;
      left: 1px;
      right: 1px;
      z-index: 2;
      height: 48px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
    }

    .nav::before {
      top: 1px;
      background: linear-gradient(180deg, var(--gray-2) 0%, var(--gray-2) 30%, transparent 100%);
    }

    .nav::after {
      bottom: 1px;
      background: linear-gradient(0deg, var(--gray-2) 0%, var(--gray-2) 30%, transparent 100%);
    }

    .nav.is-scroll-top::before,
    .nav.is-scroll-bottom::after {
      opacity: 1;
    }

    /* 导航栏滑动条 - 仅在hover时显示 */
    .nav:hover .nav-content {
      scrollbar-color: var(--gray-8) transparent;
    }

    .nav-content::-webkit-scrollbar {
      width: 6px;
    }

    .nav-content::-webkit-scrollbar-track {
      background: transparent;
    }

    .nav-content::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: var(--border-radius-3r);
    }

    .nav:hover .nav-content::-webkit-scrollbar-thumb {
      background: var(--gray-8);
    }

    .nav:hover .nav-content::-webkit-scrollbar-thumb:hover {
      background: var(--gray-7);
    }

    /* 深色模式导航栏滑动条 */
    .dark-mode .nav-content {
      scrollbar-color: transparent transparent;
    }

    .dark-mode .nav:hover .nav-content {
      scrollbar-color: var(--gray-8) transparent;
    }

    .dark-mode .nav-content::-webkit-scrollbar-thumb {
      background: transparent;
    }

    .dark-mode .nav:hover .nav-content::-webkit-scrollbar-thumb {
      background: var(--gray-8);
    }

    .dark-mode .nav:hover .nav-content::-webkit-scrollbar-thumb:hover {
      background: var(--gray-7);
    }

    .nav-title {
      display: none;
      font-size: 14px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-5);
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--gray-8);
    }

    .nav-section {
      margin-bottom: 24px;
      padding: 0 20px;
    }

    .nav-section-title {
      font-size: 12px;
      font-weight: var(--font-weight-normal);
      color: var(--gray-6);
      margin-bottom: 12px;
      padding-left: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .nav-list {
      list-style: none;
    }

    .nav-list li {
      margin-bottom: 6px;
    }

    .nav-list a {
      text-decoration: none;
      display: flex;
      align-items: center;
      min-width: 0;
      padding: 8px 10px;
      border-radius: var(--border-radius-2r);
    }

    .nav-list a:hover {
      background: var(--gray-10);
    }

    .nav-link-label {
      display: block;
      width: 100%;
      min-width: 0;
      color: var(--gray-5);
      font-size: 14px;
      line-height: 18px;
      font-weight: var(--font-weight-normal);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: color 0.2s;
    }

    .nav-list a:hover .nav-link-label {
      color: var(--gray-4);
    }

    .nav-list a.active {
      background: var(--gray-9);
    }

    .nav-list a.active .nav-link-label {
      color: var(--gray-3);
      font-weight: var(--font-weight-medium);
    }

    .section {
      margin-bottom: 60px;
    }

    .section-title {
      font-size: 32px;
      font-weight: var(--font-weight-semibold);
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--gray-8);
      color: var(--gray-3);
    }

    .breadcrumb-part {
      font-size: 14px;
      margin-bottom: 16px;
      display: inline-block;
    }

    .breadcrumb-part:first-child {
      color: var(--gray-6);
    }

    .breadcrumb-part:last-child {
      color: var(--gray-4);
    }

    .breadcrumb-separator {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0 8px;
      margin-bottom: 16px;
      display: inline-block;
    }

    .section-subtitle {
      font-size: 18px;
      font-weight: var(--font-weight-medium);
      margin-bottom: 16px;
      margin-top: 32px;
      color: var(--gray-3);
    }

    .equity-content {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .equity-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .equity-section-title,
    .equity-api-title {
      font-size: 18px;
      line-height: 24px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .equity-section-desc {
      margin: 0;
      color: var(--gray-6);
      font-size: 14px;
      line-height: 20px;
    }

    .equity-page-with-border {
      margin-top: 6px;
      padding: 32px;
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-4r);
      background: var(--gray-1);
    }

    .equity-demo-grid {
      display: flex;
      align-items: center;
      gap: 48px;
      min-height: 80px;
      flex-wrap: nowrap;
    }

    .equity-demo-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
    }

    .equity-rank-demo {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .equity-rank-demo-row {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
    }

    .equity-rank-demo-row--sample {
      gap: 12px;
    }

    .equity-community-level-demo {
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding-top: 8px;
    }

    .equity-community-level-demo-row {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
    }

    .equity-api-section {
      margin-top: 80px;
    }

    .equity-api-title {
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .equity-api-subtitle {
      margin: 0 0 12px 0;
      color: var(--gray-4);
      font-size: 14px;
      line-height: 20px;
      font-weight: var(--font-weight-medium);
    }

    .equity-api-table + .equity-api-subtitle {
      margin-top: 32px;
    }

    .equity-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .equity-api-table th,
    .equity-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
      vertical-align: top;
    }

    .equity-api-table th {
      background: var(--gray-2);
      color: var(--gray-3);
      font-weight: var(--font-weight-semibold);
    }

    .equity-api-table td {
      color: var(--gray-5);
    }

    .equity-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .text {
      font-size: 14px;
      color: var(--gray-16);
      margin-bottom: 24px;
      line-height: 1.8;
    }

    .token-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 32px;
    }

    .token-card {
      background: var(--gray-2);
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-8r);
      padding: 20px;
      box-shadow: 0 2px 4px var(--shadow);
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .token-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px var(--shadow);
    }

    .token-name {
      font-size: 14px;
      font-weight: var(--font-weight-medium);
      color: var(--gray-3);
      margin-bottom: 8px;
    }

    .token-value {
      font-size: 12px;
      color: var(--gray-16);
      margin-bottom: 12px;
    }

    .token-color {
      width: 100%;
      height: 60px;
      border-radius: var(--border-radius-4r);
      margin-bottom: 8px;
      border: 1px solid var(--gray-8);
    }

    .mode-toggle {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 8px 16px;
      background: var(--gray-2);
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-20r);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 2px 4px var(--shadow);
      color: var(--gray-3);
    }

    .mode-toggle:hover {
      background: var(--Esports-Blue);
      color: white;
      border-color: var(--Esports-Blue);
    }

    .dark-mode body,
    .dark-mode {
      background: var(--gray-1);
      color: var(--gray-3);
    }

    .dark-mode .container {
      background: var(--gray-1);
    }

    .dark-mode .nav {
      background: var(--gray-2);
      border-right-color: var(--gray-8);
      box-shadow: 2px 0 8px var(--shadow);
    }

    .dark-mode .nav-title {
      color: var(--gray-5);
      border-bottom-color: var(--gray-8);
    }

    .dark-mode .nav-section-title {
      color: var(--gray-6);
    }

    .dark-mode .nav-list a {
      color: inherit;
    }

    .dark-mode .nav-list a:hover {
      background: var(--gray-10);
    }

    .dark-mode .nav-list a:hover .nav-link-label {
      color: var(--gray-4);
    }

    .dark-mode .nav-list a.active {
      background: var(--gray-9);
    }

    .dark-mode .nav-list a.active .nav-link-label {
      color: var(--gray-3);
      font-weight: var(--font-weight-medium);
    }

    .dark-mode .section-title {
      border-bottom-color: var(--gray-8);
      color: var(--gray-3);
    }

    .dark-mode .section-subtitle {
      color: var(--gray-3);
    }

    .dark-mode .text {
      color: var(--gray-16);
    }

    .dark-mode .token-card {
      background: var(--gray-2);
      border-color: var(--gray-8);
      box-shadow: 0 2px 4px var(--shadow);
    }

    .dark-mode .token-card:hover {
      box-shadow: 0 4px 8px var(--shadow);
    }

    .dark-mode .token-name {
      color: var(--gray-3);
    }

    .dark-mode .token-value {
      color: var(--gray-16);
    }

    .dark-mode .token-color {
      border-color: var(--gray-8);
    }

    .dark-mode .mode-toggle {
      background: var(--gray-2);
      border-color: var(--gray-8);
      color: var(--gray-3);
      box-shadow: 0 2px 4px var(--shadow);
    }

    .dark-mode .mode-toggle:hover {
      background: var(--Esports-Blue-dark);
      border-color: var(--Esports-Blue-dark);
    }

    .group-section {
      margin-bottom: 40px;
    }

    .group-title {
      font-size: 16px;
      font-weight: var(--font-weight-semibold);
      margin-bottom: 16px;
      color: var(--gray-3);
    }

    .dark-mode .group-title {
      color: var(--gray-3);
    }

    .alpha-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .alpha-card {
      text-align: center;
    }

    .alpha-color {
      width: 100%;
      height: 40px;
      border-radius: var(--border-radius-4r);
      margin-bottom: 8px;
      border: 1px solid var(--gray-8);
    }

    .dark-mode .alpha-color {
      border-color: var(--gray-8);
    }

    .alpha-name {
      font-size: 12px;
      color: var(--gray-16);
    }

    .dark-mode .alpha-name {
      color: var(--gray-16);
    }

    .alias-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 20px;
      margin-bottom: 32px;
    }

    .alias-card {
      background: var(--gray-2);
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-8r);
      padding: 20px;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .alias-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px var(--shadow);
    }

    .dark-mode .alias-card {
      background: var(--gray-2);
      border-color: var(--gray-8);
    }

    .dark-mode .alias-card:hover {
      box-shadow: 0 4px 8px var(--shadow);
    }

    .alias-name {
      font-size: 14px;
      font-weight: var(--font-weight-medium);
      color: var(--gray-3);
      margin-bottom: 12px;
    }

    .dark-mode .alias-name {
      color: var(--gray-3);
    }

    .alias-colors {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }

    .alias-color-item {
      flex: 1;
    }

    .alias-color-label {
      font-size: 11px;
      color: var(--gray-16);
      margin-bottom: 6px;
    }

    .dark-mode .alias-color-label {
      color: var(--gray-16);
    }

    .alias-color-swatch {
      height: 50px;
      border-radius: var(--border-radius-4r);
      margin-bottom: 4px;
      border: 1px solid var(--gray-8);
      position: relative;
    }

    .dark-mode .alias-color-swatch {
      border-color: var(--gray-8);
    }

    .alias-color-value {
      font-size: 11px;
      color: var(--gray-16);
      font-family: 'Courier New', monospace;
    }

    .dark-mode .alias-color-value {
      color: var(--gray-16);
    }

    .alias-special-badge {
      display: inline-block;
      padding: 2px 6px;
      background: var(--Esports-Blue);
      color: white;
      border-radius: var(--border-radius-4r);
      font-size: 10px;
      margin-left: 8px;
    }

    /* 全局滑动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent !important;
      border: none !important;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--gray-8);
      border-radius: var(--border-radius-3r);
      border: none !important;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--gray-7);
    }

    /* 深色模式全局滑动条 */
    .dark-mode ::-webkit-scrollbar-track {
      background: transparent !important;
      border: none !important;
    }

    .dark-mode ::-webkit-scrollbar-thumb {
      background: var(--gray-8);
      border: none !important;
    }

    .dark-mode ::-webkit-scrollbar-thumb:hover {
      background: var(--gray-7);
    }

    

    /* Typography 页面样式 */
    .token-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 32px;
    }

    .token-table th,
    .token-table td {
      padding: 16px;
      text-align: left;
      border-bottom: 1px solid var(--gray-8);
    }

    .token-table th {
      font-size: 12px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-6);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .token-table td {
      font-size: 14px;
      color: var(--gray-3);
    }

    .description {
      font-size: 14px;
      color: var(--gray-6);
      margin-bottom: 32px;
      line-height: 1.8;
    }

    .token-preview {
      margin-bottom: 8px;
    }

    .token-description {
      font-size: 12px;
      color: var(--gray-16);
      margin-top: 4px;
    }

    .radius-showcase {
      display: flex;
      gap: 40px;
      margin-bottom: 32px;
    }

    .radius-item {
      text-align: center;
    }

    .radius-box {
      background: var(--gray-9);
      margin-bottom: 8px;
    }

    .radius-label {
      font-size: 12px;
      color: var(--gray-16);
    }

    .spacing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 16px;
      margin-bottom: 32px;
    }

    .spacing-item {
      padding: 12px;
      background: var(--gray-9);
      border-radius: var(--border-radius-4r);
      text-align: center;
    }

    .spacing-item .token-name {
      display: block;
      margin-bottom: 4px;
    }

    .spacing-item .token-value {
      display: block;
    }

    .font-family-box {
      padding: 20px;
      background: var(--gray-9);
      border-radius: var(--border-radius-4r);
      margin-bottom: 16px;
    }

    .font-family-label {
      font-size: 12px;
      color: var(--gray-16);
      margin-bottom: 8px;
    }

    .font-family-value {
      font-size: 14px;
      color: var(--gray-3);
    }


    /* ==================== Shadow Page Styles ==================== */
    .shadow-preview-section {
      display: flex;
      align-items: center;
      gap: 60px;
      padding: 10px 0 60px 0;
    }

    .shadow-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 160px;
      height: 160px;
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-4r);
      background: var(--gray-2);
      padding: 8px 11px;
      gap: 10px;
    }

    .shadow-card.shadow-sm {
      box-shadow: var(--shadow-sm);
    }

    .shadow-card.shadow-md {
      box-shadow: var(--shadow-md);
    }

    .shadow-card.shadow-lg {
      box-shadow: var(--shadow-lg);
    }

    .shadow-label {
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: var(--gray-3);
      margin: 0;
    }

    .shadow-desc {
      font-size: 14px;
      line-height: 20px;
      color: var(--gray-6);
      margin: 0;
      text-align: center;
    }

    .shadow-token-table {
      display: flex;
      flex-direction: column;
      padding: 0 16px;
    }

    .shadow-token-header {
      display: flex;
      gap: 12px;
      padding: 16px 0;
      border-bottom: 1px solid var(--gray-8);
      font-size: 14px;
      font-weight: 500;
      color: var(--gray-3);
    }

    .shadow-token-header span:first-child {
      width: 360px;
    }

    .shadow-token-header span:last-child {
      width: 360px;
    }

    .shadow-token-row {
      display: flex;
      gap: 12px;
      padding: 16px 0;
      border-bottom: 1px solid var(--gray-8);
      font-size: 14px;
      color: var(--gray-3);
    }

    .shadow-token-row:last-child {
      border-bottom: none;
    }

    .shadow-token-name {
      width: 360px;
      font-weight: 500;
    }

    .shadow-token-value {
      width: 360px;
    }

    /* ==================== Input Page Styles ==================== */
    .input-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .input-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .input-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .input-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .input-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .input-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
    }

    .input-page-demo.input-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .input-api-section {
      margin-top: 80px;
    }

    .input-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .input-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .input-api-table th,
    .input-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .input-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .input-api-table td {
      color: var(--gray-5);
    }

    .input-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* ==================== Input Number Page Styles ==================== */
    .input-number-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .input-number-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .input-number-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .input-number-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .input-number-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }

    .input-number-page-demo.input-number-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .input-number-row,
    .input-number-size-grid,
    .input-number-state-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 24px;
      width: 100%;
    }

    .input-number-demo-group {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .input-number-demo-label {
      min-width: 48px;
      color: var(--gray-6);
      font-family: var(--font-family-main);
      font-size: 14px;
      line-height: var(--line-height-body);
      font-weight: var(--font-weight-normal);
      white-space: nowrap;
    }

    .input-number-api-section {
      margin-top: 80px;
    }

    .input-number-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .input-number-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .input-number-api-table th,
    .input-number-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .input-number-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .input-number-api-table td {
      color: var(--gray-5);
    }

    .input-number-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* ==================== DatePicker Page Styles ==================== */
    .date-picker-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .date-picker-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .date-picker-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .date-picker-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .date-picker-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }

    .date-picker-page-demo.date-picker-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .date-picker-row,
    .date-picker-size-grid,
    .date-picker-type-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 24px 42px;
      width: 100%;
    }

    .date-picker-size-grid {
      flex-wrap: nowrap;
      gap: 24px;
    }

    .date-picker-api-section {
      margin-top: 80px;
    }

    .date-picker-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .date-picker-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .date-picker-api-table th,
    .date-picker-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .date-picker-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .date-picker-api-table td {
      color: var(--gray-5);
    }

    .date-picker-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* ==================== Breadcrumb Page Styles ==================== */
    .breadcrumb-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .breadcrumb-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .breadcrumb-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .breadcrumb-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .breadcrumb-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }

    .breadcrumb-page-demo.breadcrumb-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .breadcrumb-demo-column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      width: 100%;
    }

    .breadcrumb-api-section {
      margin-top: 80px;
    }

    .breadcrumb-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .breadcrumb-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .breadcrumb-api-table th,
    .breadcrumb-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .breadcrumb-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .breadcrumb-api-table td {
      color: var(--gray-5);
    }

    .breadcrumb-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* ==================== Form Page Styles ==================== */
    .form-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .form-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .form-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .form-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .form-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
    }

    .form-page-demo.form-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .form-demo-column {
      display: flex;
      flex-direction: column;
      gap: 32px;
      align-items: flex-start;
      width: 100%;
    }

    .form-demo-item {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
      width: 100%;
    }

    .form-demo-item-title {
      margin: 0;
      color: var(--gray-5);
      font-family: var(--font-family-main);
      font-size: 14px;
      font-weight: var(--font-weight-medium);
      line-height: 20px;
    }

    .form-tabbed-demo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      width: 100%;
    }

    .form-tabbed-demo-tabs {
      display: flex;
      align-items: center;
    }

    .form-tabbed-demo-panel {
      min-height: 40px;
      width: 100%;
    }

    .form-layout-demo {
      display: flex;
      flex-direction: column;
      gap: 40px;
      width: 100%;
      max-width: 720px;
    }

    .form-layout-switch {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .form-layout-switch-label {
      color: var(--gray-4);
      font-family: var(--font-family-main);
      font-size: 18px;
      font-weight: var(--font-weight-medium);
      line-height: 24px;
    }

    .form-layout-panel {
      width: 100%;
    }

    .form-layout-form {
      --form-layout-label-width: 180px;
      --form-layout-control-width: 540px;
      --form-layout-control-offset: 196px;
      display: flex;
      flex-direction: column;
      gap: 28px;
      width: 100%;
    }

    .form-layout-form .nn-form-control .nn-input-wrapper,
    .form-layout-form .nn-form-control .nn-input {
      width: 100%;
    }

    .form-layout-slider[data-direction="horizontal"] {
      justify-content: flex-start;
    }

    .form-layout-slider[data-direction="horizontal"] .nn-slider__main {
      width: 360px;
      flex: 0 0 360px;
    }

    .form-layout-action-row {
      display: flex;
      align-items: center;
      margin-left: var(--form-layout-control-offset);
    }

    .form-layout-form--left {
      --form-layout-control-offset: 190px;
    }

    .form-layout-form--right {
      --form-layout-control-offset: 196px;
    }

    .form-layout-form--vertical {
      --form-layout-control-offset: 0px;
      width: var(--form-layout-control-width);
    }

    .form-layout-form--vertical .form-layout-action-row {
      margin-left: 0;
    }

    .form-api-section {
      margin-top: 80px;
    }

    .form-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .form-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .form-api-table th,
    .form-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .form-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .form-api-table td {
      color: var(--gray-5);
    }

    .form-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* ==================== Switch Page Styles ==================== */
    .switch-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .switch-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .switch-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .switch-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .switch-row {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: center;
    }

    .switch-group {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .switch-label {
      font-size: 14px;
      line-height: var(--line-height-body);
      color: var(--gray-5);
      font-family: var(--font-family-main);
      white-space: nowrap;
    }

    .switch-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
    }

    .switch-page-demo.switch-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .switch-api-section {
      margin-top: 80px;
    }

    .switch-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .switch-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .switch-api-table th,
    .switch-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .switch-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .switch-api-table td {
      color: var(--gray-5);
    }

    .switch-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* ==================== Button Page Styles ==================== */
    .button-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .button-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .button-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .button-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }


    .button-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
    }

    .button-page-demo.button-page-with-border {
      border: 1px solid var(--gray-8);
    }

    /* Shared Code Preview Styles */
    .button-code-preview-group {
      display: inline-block;
      max-width: 100%;
    }

    .button-code-actions {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin-top: 8px;
    }

    .button-code-toggle.nn-btn,
    .button-code-toggle.nn-code-preview-toggle-fallback {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 24px;
      padding: 4px 8px;
      border: 0;
      border-radius: var(--border-radius-2r);
      background: var(--gray-9);
      box-shadow: inset 0 0 0 1px var(--gray-9);
      color: var(--gray-4);
      font-family: var(--font-family-main);
      font-size: 12px;
      line-height: 16px;
      font-weight: var(--font-weight-normal);
    }

    .button-code-toggle.nn-btn:hover,
    .button-code-toggle.nn-code-preview-toggle-fallback:hover {
      background: var(--gray-8);
      box-shadow: inset 0 0 0 1px var(--gray-8);
      color: var(--gray-4);
    }

    .button-code-toggle .nn-btn-icon,
    .button-code-toggle.nn-code-preview-toggle-fallback i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      margin-left: 0;
      font-size: 14px;
      line-height: 1;
    }

    .button-code-panel {
      display: grid;
      grid-template-rows: 0fr;
      margin-top: 8px;
      opacity: 0;
      transform: translateY(-6px);
      transition:
        grid-template-rows 240ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease,
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .button-code-panel.is-open {
      grid-template-rows: 1fr;
      opacity: 1;
      transform: translateY(0);
    }

    .button-code-panel__inner {
      min-height: 0;
      overflow: hidden;
    }

    .button-code-card {
      position: relative;
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-2r);
      background: var(--button-code-bg, #f7f8fa);
      box-sizing: border-box;
      overflow: hidden;
    }

    .button-code-copy {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 2;
    }

    .button-code-toolbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      min-height: 40px;
      padding: 8px 44px 8px 8px;
      border-bottom: 1px solid var(--gray-8);
      background: var(--button-code-toolbar-bg, #f7f8fa);
      box-sizing: border-box;
    }

    .button-code-toolbar .nn-tabs-tertiary {
      font-size: 12px;
      line-height: 16px;
    }

    .button-code-toolbar .nn-tabs-tertiary .nn-tab {
      height: 24px;
      padding: 4px 8px;
    }

    .button-code-toolbar .nn-tabs-tertiary .nn-tab-indicator {
      height: 24px;
    }

    .button-code-copy-button.nn-btn,
    .button-code-copy-button.nn-code-preview-copy-fallback {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      min-width: 24px;
      min-height: 24px;
      padding: 0;
      border: 0;
      border-radius: var(--border-radius-2r);
      background: transparent;
      box-shadow: none;
      color: var(--gray-4);
    }

    .button-code-copy-button.nn-btn:hover,
    .button-code-copy-button.nn-code-preview-copy-fallback:hover {
      background: var(--gray-10);
      box-shadow: none;
      color: var(--gray-4);
    }

    .button-code-copy-button .nn-btn-icon,
    .button-code-copy-button.nn-code-preview-copy-fallback i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      font-size: 14px;
      line-height: 1;
    }

    .button-code-pre {
      margin: 0;
      padding: 56px 16px 16px;
      max-height: 360px;
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
      color: var(--button-code-text, #24292f);
      font-family: var(--font-family-code);
      font-size: 12px;
      line-height: 18px;
      white-space: pre;
      box-sizing: border-box;
    }

    .button-code-pre:hover {
      scrollbar-color: var(--gray-8) transparent;
    }

    .button-code-pre::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .button-code-pre::-webkit-scrollbar-track {
      background: transparent;
    }

    .button-code-pre::-webkit-scrollbar-thumb {
      border-radius: var(--border-radius-3r);
      background: transparent;
    }

    .button-code-pre:hover::-webkit-scrollbar-thumb {
      background: var(--gray-8);
    }

    .button-code-pre:hover::-webkit-scrollbar-thumb:hover {
      background: var(--gray-7);
    }

    .button-code-token-keyword {
      color: var(--button-code-keyword, #cf222e);
    }

    .button-code-token-function {
      color: var(--button-code-function, #8250df);
    }

    .button-code-token-property {
      color: var(--button-code-property, #0550ae);
    }

    .button-code-token-string {
      color: var(--button-code-string, #0a7f42);
    }

    .button-code-token-punctuation {
      color: var(--button-code-punctuation, #57606a);
    }

    .button-code-token-number,
    .button-code-token-boolean {
      color: var(--button-code-literal, #953800);
    }

    .button-code-token-variable {
      color: var(--button-code-variable, #0969da);
    }

    .dark-mode {
      --button-code-bg: var(--gray-10);
      --button-code-toolbar-bg: #1b1b1f;
      --button-code-text: #d4d4d4;
      --button-code-keyword: #c586c0;
      --button-code-function: #dcdcaa;
      --button-code-property: #9cdcfe;
      --button-code-string: #ce9178;
      --button-code-punctuation: #d4d4d4;
      --button-code-literal: #b5cea8;
      --button-code-variable: #4fc1ff;
    }

    .button-api-section {
      margin-top: 80px;
    }

    .button-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .button-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .button-api-table th,
    .button-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .button-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .button-api-table td {
      color: var(--gray-5);
    }

    .button-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* ==================== Tabs Page Styles ==================== */
    .tabs-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .tabs-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .tabs-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .tabs-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .tabs-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .tabs-page-demo-group {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .tabs-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
    }

    .tabs-page-demo.tabs-page-with-border {
      border: 1px solid var(--gray-8);
    }


    .tabs-page-demo.tabs-page-horizontal {
      flex-direction: row;
      align-items: flex-start;
      gap: 24px;
      padding: 48px;
    }

    .tabs-page-demo.tabs-page-vertical {
      flex-direction: column;
      gap: 24px;
      padding: 48px;
    }

    .tabs-page-content {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .tabs-page-content.tabs-page-horizontal {
      flex-direction: row;
      align-items: flex-start;
      gap: 12px;
      padding: 48px;
      border: 1px solid var(--gray-8);
      background: var(--gray-2);
      border-radius: var(--border-radius-4r);
    }

    .tabs-api-section {
      margin-top: 80px;
    }

    .tabs-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .tabs-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .tabs-api-table th,
    .tabs-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .tabs-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .tabs-api-table td {
      color: var(--gray-5);
    }

    .tabs-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    /* Header Styles */
    #header-iframe {
      overflow: hidden;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-height);
      background: var(--gray-2);
      border-bottom: 1px solid var(--gray-8);
      padding: 0 20px;
      font-family: var(--font-family-main);
      overflow: hidden;
      box-sizing: border-box;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .header-logo {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--gray-3);
      font-size: 16px;
      font-weight: var(--font-weight-bold);
      text-decoration: none;
    }

    .header-logo svg,
    .header-logo-graphic {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      color: var(--Esports-Blue);
      display: block;
    }

    .header-nav {
      display: flex;
      align-items: center;
    }

    .header-tabs {
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--gray-8);
      border-radius: var(--border-radius-2r);
      padding: 2px;
    }

    .header-tab {
      padding: 6px 16px;
      font-size: 14px;
      font-weight: var(--font-weight-medium);
      color: var(--gray-6);
      cursor: pointer;
      border-radius: var(--border-radius-2r);
      transition: all 0.2s ease;
      border: none;
      background: transparent;
      white-space: nowrap;
    }

    .header-tab:hover {
      color: var(--gray-3);
    }

    .header-tab.active {
      background: var(--gray-2);
      color: var(--gray-3);
      box-shadow: var(--shadow-sm);
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* ==================== Tooltip Page Styles ==================== */
    .tooltip-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .tooltip-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .tooltip-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .tooltip-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .tooltip-page-demo {
      display: flex;
      padding: 48px;
    }

    .tooltip-page-demo.tooltip-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .tooltip-api-section {
      margin-top: 80px;
    }

    .tooltip-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .tooltip-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .tooltip-api-table th,
    .tooltip-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .tooltip-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .tooltip-api-table td {
      color: var(--gray-5);
    }

    .tooltip-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .badge-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .badge-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .badge-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .badge-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .badge-section-markdown {
      font-size: 14px;
      color: var(--gray-6);
      margin: 8px 0 0 0;
      font-family: var(--font-family-main);
    }

    .badge-section-markdown code {
      padding: 2px 8px;
      border-radius: var(--border-radius-2r);
      background: var(--gray-10);
      color: var(--gray-6);
      font-family: var(--font-family-code);
      font-size: 13px;
    }

    .badge-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
    }

    .badge-page-demo.badge-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .badge-api-section {
      margin-top: 80px;
    }

    .badge-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .badge-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .badge-api-table th,
    .badge-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .badge-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .badge-api-table td {
      color: var(--gray-5);
    }

    .badge-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .avatar-content {
      display: flex;
      flex-direction: column;
      gap: 48px;
      margin-bottom: 48px;
    }

    .avatar-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .avatar-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .avatar-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .avatar-section-markdown {
      font-size: 14px;
      color: var(--gray-6);
      margin: 8px 0 0 0;
      font-family: var(--font-family-main);
    }

    .avatar-section-markdown code {
      padding: 2px 8px;
      border-radius: var(--border-radius-2r);
      background: var(--gray-10);
      color: var(--gray-6);
      font-family: var(--font-family-code);
      font-size: 13px;
    }

    .avatar-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
    }

    .avatar-page-demo.avatar-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .avatar-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }

    .avatar-api-section {
      margin-top: 80px;
    }

    .avatar-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .avatar-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .avatar-api-table th,
    .avatar-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .avatar-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .avatar-api-table td {
      color: var(--gray-5);
    }

    .avatar-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .menu-api-section {
      margin-top: 80px;
    }

    .menu-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .menu-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .menu-api-table th,
    .menu-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .menu-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .menu-api-table td {
      color: var(--gray-5);
    }

    .menu-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .menu-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .menu-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .menu-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .menu-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .menu-page-demo {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 0;
      background: var(--gray-2);
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-2r);
    }

    .menu-page-demo #menu-interactive {
      position: relative;
      width: 70px;
      border-right: 1px solid var(--gray-8);
    }

    .slider-content {
      display: flex;
      flex-direction: column;
      gap: 48px;
      margin-bottom: 48px;
    }

    .slider-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .slider-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .slider-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .slider-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
      background: var(--gray-2);
    }

    .slider-page-demo.slider-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .slider-demo-grid {
      display: grid;
      width: 100%;
    }

    .slider-demo-grid-horizontal {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px 16px;
      align-items: center;
    }

    .slider-demo-grid-vertical {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 48px;
      justify-items: center;
      align-items: end;
    }

    .slider-demo-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
    }

    .slider-demo-cell-vertical {
      min-height: 220px;
    }

    .slider-api-section {
      margin-top: 80px;
    }

    .slider-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .slider-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .slider-api-table th,
    .slider-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .slider-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .slider-api-table td {
      color: var(--gray-5);
    }

    .slider-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .pagination-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .pagination-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pagination-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .pagination-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .pagination-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }

    .pagination-page-demo.pagination-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .pagination-row {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-width: 0;
      overflow: visible;
    }

    .pagination-api-section {
      margin-top: 80px;
    }

    .pagination-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .pagination-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .pagination-api-table th,
    .pagination-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .pagination-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .pagination-api-table td {
      color: var(--gray-5);
    }

    .pagination-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .table-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .table-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .table-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .table-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .table-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }

    .table-page-demo.table-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .table-row {
      display: flex;
      width: 100%;
      min-width: 0;
      overflow: visible;
    }

    .table-api-section {
      margin-top: 80px;
    }

    .table-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .table-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .table-api-table th,
    .table-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .table-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .table-api-table td {
      color: var(--gray-5);
    }

    .table-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .toast-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .toast-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .toast-section-title {
      margin: 0;
      color: var(--gray-3);
      font-family: var(--font-family-main);
      font-size: 18px;
      line-height: 26px;
      font-weight: var(--font-weight-semibold);
    }

    .toast-section-desc {
      margin: 0;
      color: var(--gray-6);
      font-family: var(--font-family-main);
      font-size: 14px;
      line-height: 20px;
      font-weight: var(--font-weight-normal);
    }

    .toast-page-demo {
      display: flex;
      width: 100%;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      box-sizing: border-box;
      overflow: visible;
    }

    .toast-page-demo.toast-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .toast-demo-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      align-items: flex-start;
      width: 100%;
    }

    .toast-demo-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }

    .toast-demo-label {
      color: var(--gray-6);
      font-family: var(--font-family-main);
      font-size: 12px;
      line-height: 16px;
      font-weight: var(--font-weight-medium);
    }

    .toast-custom-slot {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 40px;
      border-radius: var(--border-radius-2r);
      background: var(--gray-10);
      color: var(--gray-5);
      font-family: var(--font-family-main);
      font-size: 14px;
      line-height: 20px;
      font-weight: var(--font-weight-normal);
    }

    .toast-api-section {
      margin-top: 80px;
    }

    .toast-api-title {
      margin: 0 0 24px 0;
      color: var(--gray-3);
      font-family: var(--font-family-main);
      font-size: 18px;
      line-height: 26px;
      font-weight: var(--font-weight-semibold);
    }

    .toast-api-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-family-main);
      font-size: 14px;
    }

    .toast-api-table th,
    .toast-api-table td {
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
      text-align: left;
    }

    .toast-api-table th {
      background: var(--gray-2);
      color: var(--gray-3);
      font-weight: var(--font-weight-semibold);
    }

    .toast-api-table td {
      color: var(--gray-5);
    }

    .toast-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .message-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .message-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .message-section-title {
      margin: 0;
      color: var(--gray-3);
      font-family: var(--font-family-main);
      font-size: 18px;
      line-height: 26px;
      font-weight: var(--font-weight-semibold);
    }

    .message-section-desc {
      margin: 0;
      color: var(--gray-6);
      font-family: var(--font-family-main);
      font-size: 14px;
      line-height: 20px;
      font-weight: var(--font-weight-normal);
    }

    .message-page-demo {
      display: flex;
      width: 100%;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      box-sizing: border-box;
      overflow: visible;
    }

    .message-page-demo.message-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .message-demo-stack {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
      width: 100%;
    }

    .message-demo-row {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: flex-start;
      width: 100%;
    }

    .message-api-section {
      margin-top: 80px;
    }

    .message-api-title {
      margin: 0 0 24px 0;
      color: var(--gray-3);
      font-family: var(--font-family-main);
      font-size: 18px;
      line-height: 26px;
      font-weight: var(--font-weight-semibold);
    }

    .message-api-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-family-main);
      font-size: 14px;
    }

    .message-api-table th,
    .message-api-table td {
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
      text-align: left;
    }

    .message-api-table th {
      background: var(--gray-2);
      color: var(--gray-3);
      font-weight: var(--font-weight-semibold);
    }

    .message-api-table td {
      color: var(--gray-5);
    }

    .message-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .upload-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .upload-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .upload-section-title {
      margin: 0;
      color: var(--gray-3);
      font-family: var(--font-family-main);
      font-size: 18px;
      line-height: 26px;
      font-weight: var(--font-weight-semibold);
    }

    .upload-section-desc {
      margin: 0;
      color: var(--gray-6);
      font-family: var(--font-family-main);
      font-size: 14px;
      line-height: 20px;
      font-weight: var(--font-weight-normal);
    }

    .upload-page-demo {
      display: flex;
      width: 100%;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      box-sizing: border-box;
      overflow: visible;
    }

    .upload-page-demo.upload-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .upload-demo-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: flex-start;
      width: 100%;
    }

    .upload-demo-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: flex-start;
    }

    .upload-demo-label {
      color: var(--gray-6);
      font-family: var(--font-family-main);
      font-size: 12px;
      line-height: 16px;
      font-weight: var(--font-weight-medium);
    }

    .upload-api-section {
      margin-top: 80px;
    }

    .upload-api-title {
      margin: 0 0 24px 0;
      color: var(--gray-3);
      font-family: var(--font-family-main);
      font-size: 18px;
      line-height: 26px;
      font-weight: var(--font-weight-semibold);
    }

    .upload-api-table {
      width: 100%;
      border-collapse: collapse;
      font-family: var(--font-family-main);
      font-size: 14px;
    }

    .upload-api-table th,
    .upload-api-table td {
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
      text-align: left;
    }

    .upload-api-table th {
      background: var(--gray-2);
      color: var(--gray-3);
      font-weight: var(--font-weight-semibold);
    }

    .upload-api-table td {
      color: var(--gray-5);
    }

    .upload-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .label-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .label-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .label-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .label-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .label-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      width: 100%;
      box-sizing: border-box;
      overflow: visible;
    }

    .label-page-demo.label-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .label-rule-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      width: 100%;
      min-height: 28px;
    }

    .label-type-row {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      min-height: 28px;
    }

    .label-api-section {
      margin-top: 80px;
    }

    .label-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .label-api-subtitle {
      font-size: 14px;
      font-weight: var(--font-weight-medium);
      color: var(--gray-4);
      margin: 0 0 12px 0;
      font-family: var(--font-family-main);
    }

    .label-api-subtitle--spaced {
      margin-top: 32px;
    }

    .label-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .label-api-table th,
    .label-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .label-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .label-api-table td {
      color: var(--gray-5);
    }

    .label-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .game-community-states {
      display: flex;
      flex-direction: row;
      gap: 16px;
      padding: 24px;
    }

    .demo-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .demo-section h2 {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .demo-section .desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .demo-box {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 48px;
      background: var(--gray-2);
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-2r);
    }

    .tooltip-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 64px;
      width: 100%;
    }

    .tooltip-row {
      display: flex;
      gap: 64px;
      width: 100%;
      justify-content: center;
    }

    .tooltip-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 80px;
    }

    .header-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .header-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .header-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .header-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .header-page-demo {
      display: flex;
      padding: 48px;
      background: var(--gray-2);
      border-radius: var(--border-radius-2r);
    }

    .header-page-demo.header-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .header-demo-shell {
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-2r);
      overflow: hidden;
      background: var(--gray-1);
      box-shadow: var(--shadow-sm);
    }

    .header-demo-content {
      padding: 20px;
      background: var(--gray-1);
    }

    .header-demo-card {
      padding: 20px;
      border: 1px solid var(--gray-8);
      border-radius: var(--border-radius-2r);
      background: var(--gray-2);
    }

    .header-demo-card h3 {
      font-size: 16px;
      line-height: var(--line-height-subtitle);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin-bottom: 8px;
      font-family: var(--font-family-main);
    }

    .header-demo-card p {
      font-size: 14px;
      line-height: var(--line-height-body);
      color: var(--gray-16);
      font-family: var(--font-family-main);
    }

    .header-api-section {
      margin-top: 80px;
    }

    .header-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .header-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .header-api-table th,
    .header-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .header-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .header-api-table td {
      color: var(--gray-5);
    }

    .header-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .dropdown-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .dropdown-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .dropdown-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .dropdown-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .dropdown-row {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 24px;
      width: 100%;
    }

    .dropdown-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      background: var(--gray-2);
    }

    .dropdown-page-demo.dropdown-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .dropdown-row-open {
      overflow: visible;
    }

    .dropdown-api-section {
      margin-top: 80px;
    }

    .dropdown-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .dropdown-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .dropdown-api-table th,
    .dropdown-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .dropdown-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .dropdown-api-table td {
      color: var(--gray-5);
    }

    .dropdown-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .checkbox-radio-content {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .checkbox-radio-section {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .checkbox-radio-section-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .checkbox-radio-section-desc {
      font-size: 14px;
      color: var(--gray-6);
      margin: 0;
      font-family: var(--font-family-main);
    }

    .checkbox-radio-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 24px 32px;
      align-items: center;
    }

    .checkbox-radio-demo-row,
    .checkbox-radio-state-group {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: nowrap;
    }

    .checkbox-radio-page-demo {
      display: flex;
      padding: 48px;
      border-radius: var(--border-radius-2r);
      background: var(--gray-2);
    }

    .checkbox-radio-page-demo--plain {
      padding: 0;
      background: transparent;
    }

    .checkbox-radio-page-demo.checkbox-radio-page-with-border {
      border: 1px solid var(--gray-8);
    }

    .checkbox-radio-api-section {
      margin-top: 80px;
    }

    .checkbox-radio-api-title {
      font-size: 18px;
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
      margin: 0 0 24px 0;
      font-family: var(--font-family-main);
    }

    .checkbox-radio-api-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      font-family: var(--font-family-main);
    }

    .checkbox-radio-api-table th,
    .checkbox-radio-api-table td {
      text-align: left;
      padding: 12px 16px;
      border: 1px solid var(--gray-8);
    }

    .checkbox-radio-api-table th {
      background: var(--gray-2);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-3);
    }

    .checkbox-radio-api-table td {
      color: var(--gray-5);
    }

    .checkbox-radio-api-table tbody tr:hover {
      background: var(--gray-9);
    }

    .checkbox-radio-half-demo {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .checkbox-radio-half-demo-top {
      display: flex;
      align-items: center;
    }

    .checkbox-radio-half-demo-bottom {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: nowrap;
    }