:root {
  color-scheme: light;
  --docs-bg: #f6f8fb;
  --docs-surface: #ffffff;
  --docs-surface-subtle: #eef3f8;
  --docs-text: #182230;
  --docs-muted: #5d6b7a;
  --docs-border: #d9e1ea;
  --docs-accent: #175cd3;
  --docs-accent-soft: #e8f1ff;
  --docs-success: #087443;
  --docs-code-bg: #101828;
  --docs-code-text: #f8fafc;
  --docs-topbar-height: 64px;
  --docs-sidebar-width: 272px;
  --docs-content-max: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--docs-bg);
  color: var(--docs-text);
  font-family: var(--sui-font-family-base, Inter, ui-sans-serif, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.55;
}

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

a:hover {
  text-decoration: underline;
}

code {
  background: rgba(16, 24, 40, 0.07);
  border-radius: 4px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  padding: 0.125rem 0.25rem;
}

[hidden] {
  display: none !important;
}

.docs-skip {
  background: var(--docs-surface);
  border: 2px solid var(--docs-accent);
  border-radius: 6px;
  color: var(--docs-accent);
  font-weight: 700;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  padding: 8px 12px;
  position: fixed;
  transform: translateY(-72px);
  transition: transform 120ms ease;
  z-index: 100;
}

.docs-skip:focus {
  transform: translateY(0);
}

.docs-app {
  min-block-size: 100vh;
}

.docs-topbar {
  align-items: center;
  background: #111827;
  color: #ffffff;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-block-size: var(--docs-topbar-height);
  padding: 0 28px;
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}

.docs-brand {
  align-items: center;
  color: #ffffff;
  display: inline-flex;
  gap: 12px;
  min-inline-size: 0;
}

.docs-brand:hover {
  text-decoration: none;
}

.docs-brand__mark {
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  color: #111827;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 800;
  block-size: 36px;
  inline-size: 36px;
  justify-content: center;
}

.docs-brand strong,
.docs-brand small {
  display: block;
  letter-spacing: 0;
}

.docs-brand small {
  color: #cbd5e1;
  font-size: 12px;
}

.docs-topbar__links {
  align-items: center;
  display: flex;
  gap: 12px;
}

.docs-topbar__links a {
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 14px;
  padding: 8px 10px;
}

.docs-topbar__links a:hover {
  background: rgba(255, 255, 255, 0.09);
  text-decoration: none;
}

.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  min-block-size: calc(100vh - var(--docs-topbar-height));
}

.docs-sidebar {
  background: var(--docs-surface);
  border-inline-end: 1px solid var(--docs-border);
  block-size: calc(100vh - var(--docs-topbar-height));
  inset-block-start: var(--docs-topbar-height);
  overflow: auto;
  padding: 24px 18px;
  position: sticky;
}

.docs-nav {
  display: grid;
  gap: 24px;
}

.docs-nav h2 {
  color: var(--docs-muted);
  font-size: 12px;
  letter-spacing: 0;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.docs-nav__item {
  border-radius: 6px;
  color: var(--docs-text);
  display: block;
  font-weight: 600;
  padding: 9px 10px;
}

.docs-nav__item:hover,
.docs-nav__item--active {
  background: var(--docs-accent-soft);
  color: var(--docs-accent);
  text-decoration: none;
}

.docs-content {
  inline-size: 100%;
  margin: 0 auto;
  max-inline-size: var(--docs-content-max);
  min-inline-size: 0;
  padding: 40px 44px 72px;
}

.docs-content:focus {
  outline: none;
}

.docs-hero {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  margin-block-end: 40px;
}

.docs-hero__content,
.docs-runtime-card,
.docs-card,
.docs-playground,
.docs-event-panel,
.docs-table-wrap {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(16, 24, 40, 0.05);
}

.docs-hero__content {
  padding: 40px;
}

.docs-eyebrow,
.docs-card__label {
  color: var(--docs-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.docs-hero h1,
.docs-page-header h1 {
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
  max-inline-size: 850px;
}

.docs-hero p,
.docs-page-header p {
  color: var(--docs-muted);
  font-size: 18px;
  margin: 18px 0 0;
  max-inline-size: 760px;
}

.docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 28px;
}

.docs-runtime-card {
  align-content: start;
  display: grid;
  gap: 14px;
  padding: 28px;
}

.docs-runtime-card strong {
  font-size: 22px;
}

.docs-runtime-card p {
  color: var(--docs-muted);
  margin: 0;
}

.docs-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  inline-size: fit-content;
  letter-spacing: 0;
  padding: 4px 9px;
  text-transform: uppercase;
}

.docs-status--ready {
  background: #dcfae6;
  color: var(--docs-success);
}

.docs-section {
  margin-block-start: 40px;
}

.docs-section__heading {
  margin-block-end: 18px;
}

.docs-section h2,
.docs-page-header h1 {
  letter-spacing: 0;
}

.docs-section h2 {
  font-size: 26px;
  margin: 0;
}

.docs-section__heading p {
  color: var(--docs-muted);
  margin: 8px 0 0;
}

.docs-page-header {
  margin-block-end: 32px;
}

.docs-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.docs-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.docs-card {
  color: inherit;
  display: grid;
  gap: 8px;
  padding: 22px;
}

.docs-card--link:hover {
  border-color: var(--docs-accent);
  text-decoration: none;
}

.docs-card h3 {
  font-size: 20px;
  margin: 0;
}

.docs-card p {
  color: var(--docs-muted);
  margin: 0;
}

.docs-timeline {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  display: grid;
  overflow: hidden;
}

.docs-timeline__item {
  display: grid;
  gap: 4px;
  padding: 18px 22px;
  position: relative;
}

.docs-timeline__item + .docs-timeline__item {
  border-block-start: 1px solid var(--docs-border);
}

.docs-timeline__item strong::before {
  background: var(--docs-border);
  border-radius: 999px;
  content: "";
  display: inline-block;
  block-size: 9px;
  inline-size: 9px;
  margin-inline-end: 10px;
}

.docs-timeline__item--done strong::before {
  background: var(--docs-success);
}

.docs-timeline__item span,
.docs-status-list,
.docs-table td {
  color: var(--docs-muted);
}

.docs-code {
  background: var(--docs-code-bg);
  border-radius: 8px;
  color: var(--docs-code-text);
  overflow: auto;
  padding: 18px;
}

.docs-code code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.docs-status-list {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
}

.docs-status-list span {
  background: var(--docs-surface-subtle);
  border-radius: 999px;
  padding: 6px 12px;
}

.docs-playground {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 280px;
  overflow: hidden;
}

.docs-playground__stage {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(23, 92, 211, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(23, 92, 211, 0.08) 1px, transparent 1px),
    var(--docs-surface-subtle);
  background-size: 32px 32px;
  display: flex;
  justify-content: center;
  min-block-size: 420px;
  padding: 32px;
  position: relative;
}

.docs-playground__stage--tabs {
  align-items: stretch;
  justify-content: stretch;
}

.docs-playground__stage--menu {
  align-items: flex-start;
  justify-content: center;
}

.docs-playground__stage--navigation {
  align-items: stretch;
  justify-content: stretch;
}

.docs-playground__stage--tooltip {
  align-items: stretch;
  justify-content: stretch;
}

.docs-playground__stage--toast {
  align-items: center;
  justify-content: center;
}

.docs-playground__stage--dialog {
  align-items: center;
  justify-content: center;
}

.docs-playground--wide {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.docs-playground__stage--data-table {
  align-items: stretch;
  justify-content: stretch;
  min-block-size: 560px;
}

.docs-playground__stage--data-table .sui-data-table-shell {
  align-self: stretch;
  box-shadow: 0 18px 36px rgba(16, 24, 40, 0.12);
  margin: auto;
  max-inline-size: 100%;
}

.docs-data-table-detail {
  color: var(--docs-muted);
  padding-block: 4px;
}

.docs-data-table-note {
  color: var(--docs-muted);
  margin: 0;
}

.docs-data-table-examples {
  display: grid;
  gap: 34px;
}

.docs-data-table-example {
  display: grid;
  gap: 16px;
  min-inline-size: 0;
}

.docs-data-table-example__heading {
  align-items: flex-start;
  border-block-end: 1px solid var(--docs-border);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding-block-end: 12px;
}

.docs-data-table-example__heading h3 {
  font-size: 22px;
  letter-spacing: 0;
  margin: 0;
}

.docs-data-table-example__heading p {
  color: var(--docs-muted);
  margin: 6px 0 0;
}

.docs-data-table-example .sui-data-table-shell {
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(16, 24, 40, 0.08);
  padding: 20px;
  overflow: hidden;
}

.docs-data-table-stack {
  display: grid;
  gap: 16px;
}

.docs-data-table-theme {
  background: var(--sui-color-neutral-1000);
  border-radius: 8px;
  padding: 20px;
}

.docs-data-table-theme .sui-data-table-shell {
  border-color: var(--sui-color-neutral-700);
  box-shadow: none;
}

.docs-menu-grid {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.docs-menu-grid .sui-menu {
  inline-size: 100%;
}

.docs-data-table-events {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-block-start: 28px;
  padding: 22px;
}

.docs-data-table-events h3 {
  margin: 0;
}

.docs-data-table-events output {
  background: var(--docs-code-bg);
  border-radius: 6px;
  color: var(--docs-code-text);
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  min-block-size: 96px;
  padding: 14px;
  white-space: pre-wrap;
}

.docs-event-panel {
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 12px;
  grid-template-rows: auto 1fr;
  padding: 22px;
}

.docs-event-panel h3 {
  margin: 0;
}

.docs-event-panel output {
  background: var(--docs-code-bg);
  border-radius: 6px;
  color: var(--docs-code-text);
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  min-block-size: 120px;
  padding: 14px;
  white-space: pre-wrap;
}

.docs-playground-dialog {
  box-shadow: 0 22px 60px rgba(16, 24, 40, 0.24);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 60;
}

.docs-dialog-size-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-inline-size: 520px;
}

.docs-field {
  display: grid;
  gap: 6px;
  margin-block-start: 16px;
}

.docs-field span {
  color: var(--docs-muted);
  font-size: 14px;
  font-weight: 700;
}

.docs-tabs-demo {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  inline-size: min(100%, 720px);
  padding: 22px;
}

.docs-tabs-demo--compact {
  inline-size: 100%;
}

.docs-tabs-panel {
  margin-block-start: 18px;
}

.docs-tabs-panel h3 {
  margin-block: 0 8px;
}

.docs-tabs-panel p {
  color: var(--docs-muted);
  margin: 0;
}

.docs-menu-demo {
  align-items: flex-start;
  display: inline-grid;
  gap: 10px;
  inline-size: min(100%, 320px);
  justify-items: start;
  min-block-size: 300px;
  position: relative;
}

.docs-menu-surface {
  --sui-menu-inline-size: 280px;

  box-shadow: 0 18px 36px rgba(16, 24, 40, 0.18);
  inset-block-start: 48px;
  inset-inline-start: 0;
  min-inline-size: min(280px, 100%);
  position: absolute;
  z-index: 5;
}

.docs-navigation-demo {
  inline-size: min(100%, 760px);
  margin: auto;
  min-block-size: 430px;
  position: relative;
}

.docs-navigation-toolbar {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-block-end: 22px;
}

.docs-navigation-drawer {
  block-size: 340px;
  box-shadow: 0 22px 48px rgba(16, 24, 40, 0.2);
  inset-block-start: 72px;
  inset-inline-start: 50%;
  max-inline-size: min(320px, 100%);
  position: absolute;
  transform: translateX(-50%);
  z-index: 6;
}

.docs-navigation-panel {
  background: var(--docs-surface);
  border: 1px solid var(--docs-border);
  border-radius: 8px;
  color: var(--docs-muted);
  display: grid;
  gap: 8px;
  margin: 88px auto 0;
  max-inline-size: 360px;
  padding: 22px;
  text-align: center;
}

.docs-tooltip-demo {
  align-items: center;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(217, 225, 234, 0.86);
  border-radius: 8px;
  display: inline-grid;
  inline-size: 100%;
  justify-items: center;
  min-block-size: 190px;
  padding: 44px 20px;
  position: relative;
}

.docs-tooltip-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  inline-size: min(100%, 720px);
  margin: auto;
}

.docs-tooltip-label {
  color: var(--docs-muted);
  font-size: 13px;
  font-weight: 800;
  inset-block-start: 14px;
  inset-inline-start: 16px;
  letter-spacing: 0;
  position: absolute;
  text-transform: uppercase;
}

.docs-tooltip-surface {
  --sui-tooltip-max-inline-size: 224px;

  box-shadow: 0 16px 32px rgba(16, 24, 40, 0.22);
  justify-content: center;
  position: absolute;
  text-align: center;
  z-index: 5;
}

.docs-tooltip-surface--top,
.docs-tooltip-surface--bottom {
  inline-size: min(224px, calc(100vw - 72px));
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.docs-tooltip-surface--top {
  inset-block-end: calc(50% + 34px);
}

.docs-tooltip-surface--bottom {
  inset-block-start: calc(50% + 34px);
}

.docs-tooltip-surface--left,
.docs-tooltip-surface--right {
  inline-size: min(192px, calc(100vw - 72px));
  inset-block-start: 50%;
  transform: translateY(-50%);
}

.docs-tooltip-surface--left {
  inset-inline-end: calc(50% + 52px);
}

.docs-tooltip-surface--right {
  inset-inline-start: calc(50% + 52px);
}

.docs-toast-demo {
  inline-size: min(100%, 560px);
}

.docs-toast-region {
  align-items: stretch;
  inset: auto;
  justify-items: stretch;
  max-inline-size: 100%;
  position: static;
}

.docs-toast-region .sui-toast {
  --sui-toast-inline-size: 100%;

  max-block-size: none;
}

.docs-table-wrap {
  overflow: auto;
}

.docs-table {
  border-collapse: collapse;
  inline-size: 100%;
}

.docs-table th,
.docs-table td {
  border-block-end: 1px solid var(--docs-border);
  padding: 14px 16px;
  text-align: start;
  vertical-align: top;
}

.docs-table th {
  background: var(--docs-surface-subtle);
  color: var(--docs-text);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.docs-table tr:last-child td {
  border-block-end: 0;
}

@media (max-width: 980px) {
  .docs-layout,
  .docs-hero,
  .docs-playground,
  .docs-grid--three {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    block-size: auto;
    border-block-end: 1px solid var(--docs-border);
    border-inline-end: 0;
    position: static;
  }

  .docs-nav {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .docs-event-panel {
    border-block-start: 1px solid var(--docs-border);
    border-inline-start: 0;
  }
}

@media (max-width: 640px) {
  .docs-topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
  }

  .docs-layout {
    min-block-size: auto;
  }

  .docs-content {
    padding: 28px 18px 48px;
  }

  .docs-hero__content {
    padding: 26px;
  }

  .docs-hero h1,
  .docs-page-header h1 {
    font-size: 36px;
  }

  .docs-playground__stage {
    min-block-size: 340px;
    padding: 18px;
  }

  .docs-data-table-example__heading {
    flex-direction: column;
  }

  .docs-menu-grid {
    grid-template-columns: 1fr;
  }

  .docs-tooltip-grid {
    grid-template-columns: 1fr;
  }

  .docs-tooltip-demo {
    min-block-size: 220px;
    padding-inline: 12px;
  }

  .docs-tooltip-surface--left,
  .docs-tooltip-surface--right {
    inline-size: min(224px, calc(100vw - 72px));
    inset-block-start: calc(50% + 34px);
    inset-inline-end: auto;
    inset-inline-start: 50%;
    transform: translateX(-50%);
  }

  .docs-playground-dialog {
    inline-size: min(92vw, 474px);
  }
}