@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--neutral-12);
  font-family: "Inconsolata", "SFMono-Regular", Consolas, monospace;
}

body {
  padding: var(--size-3);
}

.cloak {
  display: none;
}

.docs-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: var(--size-3);
  align-items: start;
  isolation: isolate;
}

.docs-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at top, color-mix(in oklab, var(--primary-5) 10%, transparent), transparent 40%),
    linear-gradient(180deg, var(--neutral-2), var(--neutral-1));
}


.docs-shell__main {
  min-width: 0;
}

.docs-sidebar {
  --scrollbar-size: var(--size-1);
  --scrollbar-track: color-mix(in oklab, var(--neutral-3) 55%, var(--neutral-1));
  --scrollbar-thumb: color-mix(in oklab, var(--neutral-5) 62%, var(--neutral-2));
  --scrollbar-thumb-hover: color-mix(in oklab, var(--neutral-6) 68%, var(--neutral-2));
  --scrollbar-thumb-border: color-mix(in oklab, var(--neutral-1) 82%, var(--neutral-2));
  position: sticky;
  top: var(--size-3);
  display: grid;
  min-width: 0;
  max-height: calc(100dvh - (var(--size-3) * 2));
  gap: var(--size-1);
  padding: var(--size-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  border-radius: var(--border-radius-2);
  background: color-mix(in oklab, var(--neutral-2) 90%, transparent);
  box-shadow: var(--shadow-3);
}

.component-nav-search {
  width: 100%;
  min-width: 0;
  padding: var(--size--1) var(--size-0);
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--neutral-1) 92%, transparent);
  color: var(--neutral-12);
  font: inherit;
}

.component-nav {
  display: grid;
  gap: var(--size-2);
  min-width: 0;
  justify-items: stretch;
}

.component-nav-section {
  display: grid;
  gap: var(--size--1);
}

.component-nav-heading {
  margin: 0;
  color: var(--neutral-9);
  font-size: var(--font-size--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.component-nav-list {
  display: grid;
  gap: 0;
}

.component-nav-list > stellar-button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: "Orbitron", "Inconsolata", "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.04em;
}

a {
  color: inherit;
}

code,
pre {
  font: inherit;
}

.docs-layout {
  display: grid;
  gap: var(--size-3);
}

.docs-header,
.missing-page,
.source-card,
.tracker-card {
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  border-radius: var(--border-radius-2);
  background: color-mix(in oklab, var(--neutral-2) 90%, transparent);
  box-shadow: var(--shadow-3);
}

.docs-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--size-2);
  padding: var(--size-2);
}

.docs-header h1,
.tracker-card h2,
.missing-page h1 {
  margin: 0;
  font-family: "Inconsolata", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
}

.docs-header p:last-child,
.tracker-card p:last-child {
  margin-bottom: 0;
}

.docs-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size--1);
}

.docs-header-actions__primary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--size--1);
}

.docs-component-pager {
  flex: 0 0 auto;
}

.docs-color-mode {
  flex: 0 0 auto;
}

.docs-link {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--size-3) + var(--size-1));
  padding: 0 var(--size-1);
  border: 1px solid color-mix(in oklab, var(--primary-8) 18%, transparent);
  border-radius: var(--size-12);
  background: color-mix(in oklab, var(--primary-4) 16%, var(--neutral-2));
  text-decoration: none;
}

.docs-main {
  display: grid;
  gap: var(--size-3);
}

.tracker-card,
.source-card {
  padding: var(--size-2);
}

.tracker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-2);
}

.tracker-card--preview {
  display: flex;
  flex-direction: column;
}

.tracker-card--summary {
  min-height: 12rem;
}

.eyebrow {
  margin: 0 0 var(--size--2);
  color: var(--neutral-9);
  font-size: var(--font-size--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section-header {
  display: grid;
  gap: var(--size-1);
}

.section-header.section-header--row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-2);
  width: 100%;
  margin-bottom: var(--size-1);
}

.section-header--row h3 {
  flex: 1 1 auto;
}

.section-header--row > stellar-button-copy {
  flex: 0 0 auto;
}

.section-header h3 {
  margin: 0;
}

.section-header p {
  margin: var(--size--2) 0 0;
  color: var(--neutral-9);
}

.docs-properties-sections {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: var(--size-4);
}

.docs-properties-section {
  display: grid;
  align-content: start;
  align-self: start;
  gap: var(--size-2);
}

.docs-properties-section > stellar-divider {
  width: 100%;
  color: var(--neutral-10);
}

.source-card {
  overflow-x: auto;
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--neutral-2) 82%, transparent), color-mix(in oklab, var(--neutral-1) 92%, transparent)),
    color-mix(in oklab, var(--neutral-1) 88%, transparent);
}

.source-card pre {
  margin: 0;
  white-space: pre-wrap;
}

.code-highlight-wrapper {
  position: relative;
}

.code-block {
  border-radius: var(--border-radius-1);
  border: var(--border-width-0) solid var(--code-border, var(--neutral-7));
  background: var(--code-bg, var(--neutral-2));
  color: var(--code-fg, var(--neutral-12));
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.code-block pre {
  margin: 0;
  padding: var(--size-2);
}

.code-block code {
  display: block;
  font-size: var(--font-size-3);
  font-family: var(--font-mono);
  color: inherit;
  white-space: pre-wrap;
}

.code-block .chroma,
.code-block pre.chroma {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.code-block pre.chroma {
  margin: 0;
  padding: var(--size-2);
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--font-size-3);
  line-height: inherit;
  white-space: pre-wrap;
}

.code-block pre.chroma code {
  display: block;
  font-family: inherit;
  font-size: inherit;
  white-space: pre-wrap;
}

.code-block .chroma .line {
  display: block;
}

.code-block .chroma .err {
  color: var(--code-error, var(--code-fg, currentColor));
}

.code-block .chroma .c,
.code-block .chroma .c1,
.code-block .chroma .cm,
.code-block .chroma .cs,
.code-block .chroma .cp,
.code-block .chroma .cpf {
  color: var(--code-comment, var(--code-fg, currentColor));
}

.code-block .chroma .k,
.code-block .chroma .kr,
.code-block .chroma .kp,
.code-block .chroma .kv {
  color: var(--code-keyword, var(--code-fg, currentColor));
}

.code-block .chroma .kc {
  color: var(--code-keyword-const, var(--code-keyword, var(--code-fg, currentColor)));
}

.code-block .chroma .kd {
  color: var(--code-keyword-decl, var(--code-keyword, var(--code-fg, currentColor)));
}

.code-block .chroma .kn {
  color: var(--code-keyword-namespace, var(--code-keyword, var(--code-fg, currentColor)));
}

.code-block .chroma .kt {
  color: var(--code-type, var(--code-fg, currentColor));
}

.code-block .chroma .o,
.code-block .chroma .ow,
.code-block .chroma .p,
.code-block .chroma .pi,
.code-block .chroma .pm,
.code-block .chroma .w {
  color: var(--code-operator, var(--code-fg, currentColor));
}

.code-block .chroma .n,
.code-block .chroma .nx,
.code-block .chroma .py,
.code-block .chroma .nbp,
.code-block .chroma .nn,
.code-block .chroma .nl,
.code-block .chroma .ni {
  color: var(--code-name, var(--code-fg, currentColor));
}

.code-block .chroma .na {
  color: var(--code-name-attribute, var(--code-name, var(--code-fg, currentColor)));
}

.code-block .chroma .nb,
.code-block .chroma .bp {
  color: var(--code-name-builtin, var(--code-name, var(--code-fg, currentColor)));
}

.code-block .chroma .nc,
.code-block .chroma .nd,
.code-block .chroma .ne {
  color: var(--code-name-class, var(--code-name, var(--code-fg, currentColor)));
}

.code-block .chroma .no {
  color: var(--code-name-constant, var(--code-name, var(--code-fg, currentColor)));
}

.code-block .chroma .nf,
.code-block .chroma .fm {
  color: var(--code-name-function, var(--code-name, var(--code-fg, currentColor)));
}

.code-block .chroma .nt {
  color: var(--code-name-tag, var(--code-name, var(--code-fg, currentColor)));
}

.code-block .chroma .nv,
.code-block .chroma .vc,
.code-block .chroma .vg,
.code-block .chroma .vi,
.code-block .chroma .vm {
  color: var(--code-name-variable, var(--code-name, var(--code-fg, currentColor)));
}

.code-block .chroma .s,
.code-block .chroma .sa,
.code-block .chroma .sb,
.code-block .chroma .sc,
.code-block .chroma .sd,
.code-block .chroma .s1,
.code-block .chroma .s2,
.code-block .chroma .sh,
.code-block .chroma .ss,
.code-block .chroma .sx,
.code-block .chroma .dl,
.code-block .chroma .ld {
  color: var(--code-string, var(--code-fg, currentColor));
}

.code-block .chroma .se,
.code-block .chroma .si {
  color: var(--code-string-escape, var(--code-string, var(--code-fg, currentColor)));
}

.code-block .chroma .sr {
  color: var(--code-string-regex, var(--code-string, var(--code-fg, currentColor)));
}

.example-stage {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  min-inline-size: 0;
  overflow: visible;
  padding: var(--size-2);
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--neutral-1) 92%, transparent);
}

.color-mode-preview-surface {
  width: 100%;
  border: 1px solid #c9d5e1;
  border-radius: var(--border-radius-1);
  background: linear-gradient(180deg, #ffffff, #eef4f8);
  color: #18212b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0.5rem 1.25rem rgba(24, 33, 43, 0.08);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.color-mode-preview-surface.dark {
  border-color: #526476;
  background: linear-gradient(180deg, #1d2834, #121922);
  color: #f7fbff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0.75rem 1.5rem rgba(0, 0, 0, 0.28);
}

.color-mode-preview-stack {
  display: grid;
  gap: var(--size-2);
  padding: var(--size-2);
}

.color-mode-preview-copy {
  display: grid;
  gap: var(--size--1);
}

.color-mode-preview-copy h3,
.color-mode-preview-copy p {
  margin: 0;
}

.color-mode-preview-readout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1);
}

.color-mode-preview-chip {
  display: grid;
  gap: 0.15rem;
  min-width: 6.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(24, 33, 43, 0.12);
  border-radius: calc(var(--border-radius-1) - 0.15rem);
  background: rgba(255, 255, 255, 0.78);
}

.color-mode-preview-surface.dark .color-mode-preview-chip {
  border-color: rgba(247, 251, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.color-mode-preview-chip span {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}

.color-mode-preview-surface.dark .color-mode-preview-chip span {
  color: rgba(247, 251, 255, 0.72);
  opacity: 1;
}

.color-mode-preview-chip strong {
  font-size: 1rem;
}

.color-mode-preview-surface.dark .eyebrow {
  color: #f4b183;
}

.color-mode-preview-surface.dark .color-mode-preview-copy p,
.color-mode-preview-surface.dark .color-mode-preview-note {
  color: rgba(247, 251, 255, 0.9);
}

.color-mode-preview-note {
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.86;
}

.dock-preview-surface {
  position: relative;
  width: min(100%, 26rem);
  min-height: 13rem;
  padding-top: 8rem;
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  border-radius: var(--border-radius-1);
  background:
    radial-gradient(circle at top center, color-mix(in oklab, var(--primary-4) 12%, transparent), transparent 42%),
    linear-gradient(180deg, color-mix(in oklab, var(--neutral-2) 94%, transparent), color-mix(in oklab, var(--neutral-1) 98%, transparent));
  overflow: hidden;
}

.component-docs-grid {
  display: grid;
  gap: var(--size-2);
}

.component-docs-block {
  display: grid;
  gap: var(--size-1);
}

.component-docs-stack {
  display: grid;
  gap: var(--size-1);
}

.component-docs-block h4 {
  margin: 0;
  font-size: var(--font-size-0);
}

.component-showcase {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1);
}

.component-showcase--align-end {
  align-items: end;
}

.component-playground {
  display: grid;
  gap: var(--size-2);
}

.playground-controls {
  display: grid;
  align-self: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--size-1);
}

.playground-controls > * {
  min-width: 0;
}

.playground-field {
  display: grid;
  gap: var(--size--2);
}

.playground-field--wide {
  grid-column: 1 / -1;
}

.playground-field--span-2 {
  grid-column: span 2;
  min-width: 12rem;
}

.playground-field span {
  color: var(--neutral-9);
  font-size: var(--font-size--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.playground-field select,
.playground-field input {
  width: 100%;
  min-height: calc(var(--size-2) + var(--size-1));
  padding: 0 var(--size-1);
  border: 1px solid color-mix(in oklab, var(--neutral-7) 24%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--neutral-2) 88%, transparent);
  color: var(--neutral-12);
  font: inherit;
}

.playground-controls > stellar-input,
.playground-controls > stellar-text-field,
.playground-controls > stellar-number-input,
.playground-controls > stellar-number-field,
.playground-controls > stellar-select,
.playground-controls > stellar-textarea,
.playground-controls > stellar-text-area,
.playground-controls > stellar-rating,
.playground-controls > stellar-checkbox,
.playground-controls > stellar-toggle,
.playground-controls > stellar-switch {
  display: block;
  width: 100%;
  max-width: 100%;
}

.playground-stack {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
}

.component-playground-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-2);
}

.component-playground-grid__full {
  grid-column: 1 / -1;
}

.scroller-demo {
  inline-size: min(100%, 34rem);
  padding: 0.75rem;
  border: 1px solid color-mix(in oklab, var(--neutral-7) 24%, transparent);
  border-radius: var(--border-radius-3);
  background: var(--neutral-1);
}

.scroller-demo[orientation='vertical'],
.scroller-demo[orientation='both'] {
  block-size: 14rem;
}

.scroller-demo > section {
  display: grid;
  gap: 0.75rem;
  inline-size: 19rem;
  min-inline-size: 19rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--neutral-7) 18%, transparent);
  border-radius: var(--border-radius-3);
  background: color-mix(in oklab, var(--neutral-2) 94%, transparent);
}

.scroller-demo > section > header {
  display: grid;
  gap: 0.25rem;
}

.scroller-demo > section > article {
  display: grid;
  padding: 0.875rem;
  border: 1px solid color-mix(in oklab, var(--neutral-7) 14%, transparent);
  border-radius: var(--border-radius-2);
  background: var(--neutral-1);
}

.scroller-demo[orientation='horizontal'] {
  white-space: nowrap;
}

.scroller-demo[orientation='horizontal'] > section {
  display: inline-grid;
  vertical-align: top;
  white-space: normal;
}

.scroller-demo[orientation='horizontal'] > section + section {
  margin-inline-start: 0.75rem;
}

.scroller-demo[orientation='vertical'] > section + section {
  margin-block-start: 0.75rem;
}

.scroller-demo[orientation='both'] {
  white-space: nowrap;
}

.scroller-demo[orientation='both'] > section {
  display: inline-grid;
  vertical-align: top;
  white-space: normal;
}

.scroller-demo[orientation='both'] > section + section {
  margin-inline-start: 0.75rem;
}

.scroller-demo > section h3,
.scroller-demo > section p {
  margin: 0;
}

.scroller-demo > section > header > p {
  color: var(--neutral-9);
  font: var(--font-ui-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scroller-demo > section h3 {
  font: var(--font-ui-md);
  color: var(--neutral-12);
}

.scroller-demo > section > article > p {
  color: var(--neutral-11);
  line-height: 1.55;
}

.component-api-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-2);
}

.component-api-grid .source-card {
  display: grid;
  gap: var(--size-1);
}

.component-api-grid h4 {
  margin: 0;
  font-size: var(--font-size-0);
}

.api-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size--1);
}

.api-table th,
.api-table td {
  padding: var(--size--1) var(--size-0);
  border-bottom: 1px solid color-mix(in oklab, var(--neutral-7) 16%, transparent);
  text-align: left;
  vertical-align: top;
}

.api-table thead th {
  color: var(--neutral-9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.api-table tbody th {
  min-width: 8rem;
}

.notes-list {
  margin: 0;
  padding-left: calc(var(--size-2) + var(--size-0));
}

.notes-list li + li {
  margin-top: var(--size--2);
}

.tracker-table-wrap {
  overflow-x: auto;
}

.overview-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1);
}

.overview-option {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--size-2) + var(--size-2));
  padding: 0 var(--size-1);
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  border-radius: var(--size-12);
  background: color-mix(in oklab, var(--neutral-3) 72%, var(--neutral-2));
  text-decoration: none;
  white-space: nowrap;
}

.overview-option:hover {
  background: color-mix(in oklab, var(--primary-4) 20%, var(--neutral-2));
}

.tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size--1);
}

.tracker-table th,
.tracker-table td {
  padding: var(--size--1) var(--size-0);
  border-bottom: 1px solid color-mix(in oklab, var(--neutral-7) 16%, transparent);
  text-align: left;
}

.tracker-table thead th {
  color: var(--neutral-9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tracker-table tbody th {
  min-width: 11rem;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--size-1) + var(--size-0));
  padding: 0 var(--size-0);
  border-radius: 999px;
  font-size: var(--font-size--2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.status-pill.is-complete {
  background: color-mix(in oklab, var(--secondary-4) 14%, transparent);
  color: var(--secondary-10);
}

.status-pill.is-pending {
  background: color-mix(in oklab, var(--neutral-4) 16%, transparent);
  color: var(--neutral-10);
}

.error-panel {
  margin: 0;
  padding: var(--size-1) var(--size-2);
  border: 1px solid color-mix(in oklab, var(--error-7) 30%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--error-5) 14%, transparent);
  color: var(--error-11);
  white-space: pre-wrap;
}

.missing-page {
  display: grid;
  gap: var(--size-1);
  width: min(100%, 36rem);
  margin: 10vh auto 0;
  padding: var(--size-3);
}


.docs-shell--editor {
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) minmax(19rem, 24rem);
}

.docs-editor {
  position: sticky;
  top: var(--size-3);
  min-width: 0;
  max-height: calc(100dvh - (var(--size-3) * 2));
  overflow-y: auto;
}

.docs-editor__loading,
.docs-editor__empty {
  color: var(--neutral-9);
  font-size: var(--font-size--1);
}

.docs-editor__toolbar {
  display: grid;
  gap: var(--size-1);
}

.docs-editor__search {
  width: 100%;
}

.docs-editor__status,
.docs-editor__exports {
  display: grid;
  gap: var(--size-1);
}

.docs-editor__status-row,
.docs-editor__token-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size--1);
}

.docs-editor__status-row span,
.docs-editor__token {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--size-1) + var(--size-0));
  padding: 0 var(--size-0);
  border: 1px solid color-mix(in oklab, var(--neutral-7) 16%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--neutral-3) 56%, transparent);
  color: var(--neutral-11);
  font-size: var(--font-size--2);
}

.docs-editor__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--size-1);
}

.docs-editor__section {
  border: 1px solid color-mix(in oklab, var(--neutral-7) 14%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--neutral-2) 82%, transparent);
}

.docs-editor__section + .docs-editor__section {
  margin-top: var(--size-1);
}

.docs-editor__summary {
  display: grid;
  gap: var(--size--2);
  padding: var(--size-1) var(--size-2);
  cursor: pointer;
  list-style: none;
}

.docs-editor__summary::-webkit-details-marker {
  display: none;
}

.docs-editor__summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-1);
}

.docs-editor__summary p {
  margin: 0;
  color: var(--neutral-9);
  font-size: var(--font-size--2);
}

.docs-editor__section-body {
  display: grid;
  gap: var(--size-1);
  padding: 0 var(--size-2) var(--size-2);
}

.docs-editor__field,
.docs-editor__group {
  display: grid;
  gap: var(--size--2);
}

.docs-editor__field label,
.docs-editor__group > div:first-child {
  color: var(--neutral-10);
  font-size: var(--font-size--1);
}

.docs-editor__field input,
.docs-editor__field textarea,
.docs-editor__search input,
.docs-editor__group textarea {
  width: 100%;
  min-width: 0;
  padding: var(--size--1) var(--size-0);
  border: 1px solid color-mix(in oklab, var(--neutral-7) 20%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--neutral-1) 92%, transparent);
  color: var(--neutral-12);
  font: inherit;
}

.docs-editor__field textarea,
.docs-editor__group textarea {
  min-height: 8rem;
  resize: vertical;
}

.docs-editor__checkbox {
  display: flex;
  align-items: center;
  gap: var(--size-0);
}

.docs-editor__checkbox input {
  width: auto;
}

.docs-editor__error {
  margin: 0;
  padding: var(--size-1);
  border: 1px solid color-mix(in oklab, var(--error-7) 24%, transparent);
  border-radius: var(--border-radius-1);
  background: color-mix(in oklab, var(--error-5) 12%, transparent);
  color: var(--error-11);
  font-size: var(--font-size--1);
  white-space: pre-wrap;
}

.docs-editor__nested {
  margin-left: var(--size-1);
  padding-left: var(--size-1);
  border-left: 1px solid color-mix(in oklab, var(--neutral-7) 16%, transparent);
}

@media (max-width: 920px) {
  body {
    padding: var(--size-2);
  }

  .docs-shell,
  .docs-shell--editor {
    grid-template-columns: 1fr;
  }

  .docs-sidebar,
  .docs-editor {
    position: static;
    max-height: none;
  }

  .docs-header {
    align-items: start;
    flex-direction: column;
  }

  .tracker-grid {
    grid-template-columns: 1fr;
  }

  .component-playground-grid,
  .component-api-grid {
    grid-template-columns: 1fr;
  }

  .playground-field--wide {
    grid-column: span 1;
  }

  .playground-field--span-2 {
    grid-column: span 1;
    min-width: 0;
  }
}