.token-spec-page {
  min-height: calc(100vh - var(--top-nav-height, 4rem));
  padding: 0 0 3rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 18rem),
    var(--paper);
}

.token-spec-layout {
  display: grid;
  gap: 1.25rem;
  max-width: 84rem;
  margin: 0 auto;
}

.token-spec-intro {
  display: grid;
  gap: 0.45rem;
  padding-block: 0.5rem 0.25rem;
}

.token-spec-intro h1 {
  margin: 0;
  font-size: clamp(1.75rem, 2.2vw, 2.5rem);
  line-height: 1.05;
}

.token-spec-intro p {
  max-width: 52rem;
  margin: 0;
  color: var(--ink-soft);
}

.token-spec-kicker {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.token-spec-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(12rem, 0.65fr));
  gap: 0.9rem;
}

.token-spec-page-preview {
  display: grid;
  min-height: 13rem;
  align-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.token-spec-page-preview span,
.token-spec-page-preview strong {
  display: block;
}

.token-spec-page-preview span {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.token-spec-page-preview strong {
  max-width: 14rem;
  font-size: 1.05rem;
}

.token-spec-preview-surface {
  display: grid;
  gap: 0.35rem;
  max-width: 24rem;
  padding: 1rem;
  border: 0.0625rem solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 5%, transparent);
}

.token-spec-preview-surface p {
  margin: 0;
}

.token-spec-diagnostic {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 0.0625rem solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  box-shadow: var(--shadow-sm);
}

.token-spec-diagnostic-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 13rem) auto;
  gap: 0.9rem;
  align-items: end;
}

.token-spec-diagnostic-control h2,
.token-spec-diagnostic-control p {
  margin: 0;
}

.token-spec-diagnostic-control h2 {
  font-size: 1.1rem;
}

.token-spec-diagnostic-control p {
  max-width: 48rem;
  color: var(--ink-soft);
}

.token-spec-diagnostic-control label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.token-spec-diagnostic-control input,
.token-spec-diagnostic-control select {
  min-width: 0;
  min-height: 2.5rem;
  padding: 0 0.7rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.token-spec-diagnostic-control input[aria-invalid="true"] {
  border-color: #b42318;
  outline: 0.125rem solid color-mix(in srgb, #b42318 32%, transparent);
}

.token-spec-diagnostic-control button {
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.token-spec-diagnostic-previews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.token-spec-diagnostic-swatch,
.token-spec-diagnostic-derived {
  display: grid;
  min-height: 5.75rem;
  align-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem;
  border: 0.0625rem solid color-mix(in srgb, currentColor 16%, var(--line));
  border-radius: var(--radius-sm);
}

.token-spec-diagnostic-swatch {
  color: #fff;
}

.token-spec-diagnostic-derived {
  background: var(--paper);
  color: var(--ink);
}

.token-spec-diagnostic-swatch span,
.token-spec-diagnostic-derived span {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.token-spec-diagnostic-swatch strong,
.token-spec-diagnostic-derived strong {
  overflow-wrap: anywhere;
}

.token-spec-diagnostic-status {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.token-spec-section,
.token-spec-note {
  display: grid;
  gap: 0.9rem;
}

.token-spec-section-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  padding-block-start: 0.4rem;
  border-top: 0.0625rem solid var(--line);
}

.token-spec-section-header h2,
.token-spec-note h2 {
  margin: 0;
  font-size: 1.1rem;
}

.token-spec-section-header p {
  max-width: 34rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.token-spec-card-list {
  display: grid;
  gap: 0.8rem;
}

.token-spec-card {
  display: grid;
  grid-template-columns: minmax(10rem, 0.9fr) minmax(16rem, 1.4fr) minmax(12rem, 1fr) minmax(15rem, 1.25fr);
  gap: 0;
  overflow: hidden;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

.token-spec-card > * {
  min-width: 0;
  padding: 1rem;
}

.token-spec-card > * + * {
  border-inline-start: 0.0625rem solid var(--line);
}

.token-spec-card-preview,
.token-spec-card-main,
.token-spec-card-side {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.token-spec-swatch {
  min-height: 5.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
}

.token-spec-surface-card-preview {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--token-preview-radius, var(--radius-sm));
}

.token-spec-scrollbar-preview {
  display: grid;
  gap: 0.5rem;
  max-block-size: 8rem;
  overflow: auto;
  padding: 0.75rem;
  border: 0.0625rem solid var(--token-preview-border);
  border-radius: var(--radius-sm);
  scrollbar-width: var(--token-preview-scrollbar-width);
  scrollbar-color: var(--token-preview-scrollbar-thumb) var(--token-preview-scrollbar-track);
}

.token-spec-scrollbar-preview::-webkit-scrollbar {
  inline-size: 0.75rem;
}

.token-spec-scrollbar-preview::-webkit-scrollbar-track {
  background: var(--token-preview-scrollbar-track);
}

.token-spec-scrollbar-preview::-webkit-scrollbar-thumb {
  border-radius: var(--token-preview-scrollbar-radius);
  background: var(--token-preview-scrollbar-thumb);
}

.token-spec-scrollbar-preview span {
  display: block;
  padding: 0.45rem 0.6rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.token-spec-resize-handle-preview {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) var(--token-preview-resize-hit-area-inline-size);
  min-height: 7rem;
  align-items: stretch;
  overflow: visible;
  border: 0.0625rem solid var(--token-preview-border);
  border-radius: var(--radius-sm);
}

.token-spec-resize-panel {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 1rem;
  border-inline-end: 0.0625rem solid var(--token-preview-border);
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
}

.token-spec-resize-hit-area {
  display: grid;
  min-block-size: var(--token-preview-resize-min-block-size);
  place-items: center;
  cursor: var(--token-preview-resize-cursor);
  outline: 0.0625rem dashed color-mix(in srgb, var(--token-preview-resize-visual-color) 72%, transparent);
  outline-offset: -0.0625rem;
}

.token-spec-resize-rail {
  display: block;
  inline-size: var(--token-preview-resize-visual-inline-size);
  block-size: 100%;
  border-radius: var(--token-preview-resize-visual-radius);
  background: var(--token-preview-resize-visual-color);
}

.token-spec-surface-card-sample {
  display: inline-grid;
  min-width: 9rem;
  min-height: 2.75rem;
  place-items: center;
  padding: 0 0.9rem;
  border: 0.0625rem solid currentColor;
  border-radius: var(--radius-sm);
  background: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.token-spec-button-frame-preview {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
}

.token-spec-button-frame-sample {
  display: inline-grid;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  gap: var(--token-preview-gap);
  padding-block: var(--token-preview-padding-block);
  padding-inline: var(--token-preview-padding-inline);
  border: 0.0625rem solid var(--token-preview-border);
  border-radius: var(--token-preview-radius);
  background: var(--token-preview-background);
  color: var(--token-preview-foreground);
  font-family: var(--token-preview-font-family);
  font-size: var(--token-preview-font-size);
  font-weight: var(--token-preview-font-weight);
  line-height: var(--token-preview-line-height);
  letter-spacing: var(--token-preview-letter-spacing);
  text-transform: var(--token-preview-text-transform);
}

.token-spec-frame-preview {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
}

.token-spec-radius-sample,
.token-spec-padding-sample,
.token-spec-gap-sample,
.token-spec-indicator-sample {
  display: grid;
  box-sizing: border-box;
  min-width: 9rem;
  min-height: 2.75rem;
  align-content: center;
  justify-content: start;
  border: 0.0625rem solid currentColor;
  background: inherit;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.token-spec-radius-sample {
  place-items: center;
  padding: 0.625rem 0.75rem;
  border-radius: var(--token-preview-radius);
}

.token-spec-padding-sample {
  padding-block: var(--token-preview-padding-block);
  padding-inline: var(--token-preview-padding-inline);
  border-radius: var(--radius-sm);
}

.token-spec-gap-sample {
  gap: var(--token-preview-gap);
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
}

.token-spec-gap-sample small {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.72;
}

.token-spec-indicator-sample {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
}

.token-spec-indicator-marker {
  display: block;
  align-self: var(--token-preview-indicator-block-size-behavior);
  inline-size: var(--token-preview-indicator-inline-size);
  min-block-size: var(--token-preview-indicator-min-block-size);
  border-radius: var(--token-preview-indicator-radius);
  background: currentColor;
}

.token-spec-inline-size-preview {
  display: grid;
  box-sizing: border-box;
  min-height: 4rem;
  max-width: 100%;
  place-items: center;
  border: 0.0625rem solid var(--token-preview-border);
  border-radius: var(--radius-sm);
  background: inherit;
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
}

.token-spec-icon-size-sample {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.token-spec-focus-preview {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
}

.token-spec-focus-sample {
  display: inline-flex;
  min-width: 9rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  border: 0.0625rem solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 7%, transparent);
  outline: var(--token-preview-ring);
  outline-offset: var(--token-preview-ring-offset);
  font-weight: 700;
  text-align: center;
}

.token-spec-target-preview {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
}

.token-spec-target-box {
  display: inline-grid;
  min-width: var(--token-preview-min-width);
  min-height: var(--token-preview-min-height);
  place-items: center;
  padding: 0 0.35rem;
  border: 0.125rem solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 7%, transparent);
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
}

.token-spec-text-preview {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
}

.token-spec-text-sample {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.9rem;
  border: 0.0625rem solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-weight: 800;
  text-align: center;
}

.token-spec-text-style-preview {
  display: grid;
  min-height: 5.5rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.token-spec-text-style-sample {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 12rem;
  min-width: 0;
  padding-inline: 0.4rem;
  justify-self: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--token-preview-font-family);
  font-size: var(--token-preview-font-size);
  font-weight: var(--token-preview-font-weight);
  line-height: var(--token-preview-line-height);
  letter-spacing: var(--token-preview-letter-spacing);
  text-align: center;
  text-transform: var(--token-preview-text-transform);
}

.token-spec-tooltip-preview {
  display: grid;
  min-height: 7rem;
  place-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.token-spec-tooltip-sample {
  display: block;
  box-sizing: border-box;
  max-width: min(100%, var(--token-preview-max-inline-size));
  min-width: 0;
  padding: var(--token-preview-padding-block) var(--token-preview-padding-inline);
  border: 0.0625rem solid var(--token-preview-border);
  border-radius: var(--token-preview-radius);
  background: inherit;
  box-shadow: var(--token-preview-shadow);
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: start;
}

.primitive-proof-stage {
  display: grid;
  gap: 1rem;
}

.primitive-proof-row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.primitive-proof-label {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 800;
}

.primitive-proof-host {
  display: grid;
  min-width: 0;
  max-width: 18rem;
  overflow: visible;
  padding: 0.5rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
}

.pattern-proof-stage {
  display: grid;
  gap: 1rem;
}

.pattern-proof-controls {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) repeat(3, minmax(10rem, 14rem));
  gap: 1rem;
  align-items: end;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.pattern-proof-controls h2,
.pattern-proof-controls p {
  margin: 0;
}

.pattern-proof-controls h2 {
  margin-block-start: 0.2rem;
  font-size: 1rem;
}

.pattern-proof-controls p:not(.token-spec-kicker) {
  margin-block-start: 0.25rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.35;
}

.pattern-proof-controls label {
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.pattern-proof-controls select {
  width: 100%;
  min-height: 2.4rem;
  min-width: 0;
  padding: 0.35rem 0.55rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
}

.pattern-proof-row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.pattern-proof-label {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 800;
}

.pattern-proof-slot {
  display: grid;
  min-width: 0;
  width: min(100%, var(--pattern-proof-slot-width, 12rem));
  overflow: visible;
  padding: 0.5rem;
  border: 0.0625rem dashed color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
}

.pattern-proof-slot[data-index-nav-panel-proof-slot] {
  width: 100%;
  max-height: 75vh;
  overflow: auto;
}

.pattern-proof-slot[data-index-nav-proof-slot] {
  width: 100%;
  max-height: 75vh;
  overflow: auto;
}

.ds-index-nav-label {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.ds-index-nav-item {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.ds-index-nav-list {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.ds-index-nav-list-items {
  display: grid;
  gap: var(--pattern-index-nav-list-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-index-nav-list-item {
  min-width: 0;
}

.ds-index-nav-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  gap: var(--pattern-index-nav-panel-gap);
  align-content: start;
  width: min(100%, var(--pattern-index-nav-panel-inline-size));
  min-width: 0;
  block-size: var(--pattern-index-nav-panel-max-block-size);
  max-block-size: var(--pattern-index-nav-panel-max-block-size);
  padding-block: var(--pattern-index-nav-panel-padding-block);
  padding-inline: var(--pattern-index-nav-panel-padding-inline);
  border: 0.0625rem solid var(--pattern-index-nav-panel-border);
  border-radius: var(--pattern-index-nav-panel-radius);
  background: var(--pattern-index-nav-panel-background);
  color: var(--pattern-index-nav-panel-foreground);
}

.ds-index-nav-panel[data-index-nav-panel-resizable="true"] {
  resize: none;
}

.ds-resize-handle-control {
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--primitive-resize-handle-hit-area-inline-size) / -2);
  z-index: 2;
  display: grid;
  min-block-size: max(var(--primitive-target-min-height), var(--primitive-resize-handle-min-block-size));
  inline-size: var(--primitive-resize-handle-hit-area-inline-size);
  place-items: center;
  cursor: var(--primitive-resize-handle-cursor);
  touch-action: var(--primitive-resize-handle-touch-action);
}

.ds-resize-handle-control:focus-visible {
  outline: var(--primitive-focus-ring);
  outline-offset: var(--primitive-focus-ring-offset);
}

.ds-resize-handle-control-rail {
  display: block;
  inline-size: var(--primitive-resize-handle-visual-inline-size);
  block-size: 100%;
  border-radius: var(--primitive-resize-handle-visual-radius);
  background: var(--primitive-resize-handle-color);
  opacity: 0.7;
}

.ds-scroll-region-control {
  min-width: 0;
  min-height: 0;
  max-height: var(--primitive-scroll-region-max-block-size);
  overflow: auto;
  scrollbar-width: var(--primitive-scrollbar-width);
  scrollbar-color: var(--primitive-scrollbar-thumb) var(--primitive-scrollbar-track);
}

.ds-scroll-region-control::-webkit-scrollbar {
  inline-size: 0.75rem;
}

.ds-scroll-region-control::-webkit-scrollbar-track {
  background: var(--primitive-scrollbar-track);
}

.ds-scroll-region-control::-webkit-scrollbar-thumb {
  border-radius: var(--primitive-scrollbar-radius);
  background: var(--primitive-scrollbar-thumb);
}

.ds-index-nav-panel-empty {
  margin: 0;
  padding-block: var(--pattern-index-nav-panel-padding-block);
  padding-inline: var(--pattern-index-nav-panel-padding-inline);
  color: inherit;
  font-family: var(--pattern-index-nav-panel-label-font-family);
  font-size: var(--pattern-index-nav-panel-label-font-size);
  font-weight: var(--pattern-index-nav-panel-label-font-weight);
  letter-spacing: var(--pattern-index-nav-panel-label-letter-spacing);
  line-height: var(--pattern-index-nav-panel-label-line-height);
  text-transform: var(--pattern-index-nav-panel-label-text-transform);
}

.ds-index-nav {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: var(--pattern-index-nav-gap);
  align-items: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.ds-index-nav[data-index-nav-double-width="false"] {
  grid-auto-flow: row;
}

.ds-index-nav[data-index-nav-viewport="mobile"],
.ds-index-nav[data-index-nav-viewport="mobile"][data-index-nav-double-width="false"] {
  grid-auto-flow: row;
  width: 100%;
}

.ds-index-nav-panel[data-index-nav-panel-viewport="mobile"] {
  width: min(100%, var(--pattern-index-nav-panel-mobile-inline-size));
  block-size: auto;
  max-block-size: none;
}

.ds-index-nav-panel[data-index-nav-panel-viewport="mobile"] .ds-resize-handle-control {
  display: none;
}

.ds-index-nav-panel[data-index-nav-panel-header-mode="hidden"] {
  grid-template-rows: minmax(0, 1fr);
}

.ds-index-nav-panel[data-index-nav-panel-viewport="mobile"] .ds-scroll-region-control[data-scroll-region-control-mobile-mode="page-scroll"],
[data-scroll-region-proof-host][data-scroll-region-viewport="mobile"] .ds-scroll-region-control[data-scroll-region-control-mobile-mode="page-scroll"] {
  max-height: none;
  overflow: visible;
}

.primitive-scroll-region-sample-list {
  display: grid;
  gap: var(--pattern-index-nav-panel-gap, 0.75rem);
}

.primitive-scroll-region-sample-list span {
  display: block;
  padding: 0.5rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.primitive-resize-proof-host {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.primitive-resize-proof-panel {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  gap: 0.5rem;
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

@media (max-width: 56rem) {
  .pattern-proof-controls,
  .pattern-proof-row {
    grid-template-columns: 1fr;
  }
}

.ds-truncating-label {
  position: relative;
  display: inline-grid;
  box-sizing: border-box;
  max-width: 100%;
  place-items: center start;
  color: inherit;
  cursor: default;
  outline: none;
}

.ds-truncating-label[data-truncating-label-overflow="true"] {
  cursor: help;
}

.ds-truncating-label:focus-visible {
  outline: var(--primitive-focus-ring);
  outline-offset: var(--primitive-focus-ring-offset);
}

.ds-truncating-label-text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-family: var(--primitive-label-font-family);
  font-size: var(--primitive-label-font-size);
  font-weight: var(--primitive-label-font-weight);
  letter-spacing: var(--primitive-label-letter-spacing);
  line-height: var(--primitive-label-line-height);
  text-overflow: ellipsis;
  text-transform: var(--primitive-label-text-transform);
  white-space: nowrap;
}

.ds-truncating-label-tooltip {
  position: fixed;
  z-index: var(--primitive-tooltip-z-index);
  inset-block-start: var(--primitive-truncating-label-tooltip-top, 0);
  inset-inline-start: var(--primitive-truncating-label-tooltip-left, 0);
  display: block;
  box-sizing: border-box;
  width: min(max-content, var(--primitive-tooltip-max-inline-size), calc(100vw - 4rem));
  max-width: min(var(--primitive-tooltip-max-inline-size), calc(100vw - 4rem));
  padding: var(--primitive-tooltip-padding-block) var(--primitive-tooltip-padding-inline);
  border: 0.0625rem solid var(--primitive-tooltip-border);
  border-radius: var(--primitive-tooltip-radius);
  background: var(--primitive-tooltip-background);
  box-shadow: var(--primitive-tooltip-shadow);
  color: var(--primitive-tooltip-foreground);
  font-family: var(--primitive-tooltip-font-family);
  font-size: var(--primitive-tooltip-font-size);
  font-weight: var(--primitive-tooltip-font-weight);
  letter-spacing: var(--primitive-tooltip-letter-spacing);
  line-height: var(--primitive-tooltip-line-height);
  opacity: 0;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: start;
  text-transform: var(--primitive-tooltip-text-transform);
  transform: translateY(0.2rem);
  transition:
    opacity var(--primitive-tooltip-motion-duration) var(--primitive-tooltip-motion-easing),
    transform var(--primitive-tooltip-motion-duration) var(--primitive-tooltip-motion-easing);
  visibility: hidden;
}

[dir="rtl"] .ds-truncating-label-tooltip {
  inset-inline-start: var(--primitive-truncating-label-tooltip-left, 0);
  inset-inline-end: auto;
}

.ds-truncating-label[data-truncating-label-overflow="true"][data-truncating-label-open="true"] .ds-truncating-label-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.primitive-proof-host-narrow {
  max-width: 13rem;
}

.primitive-event-log {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.ds-text-action-button-control {
  display: inline-grid;
  box-sizing: border-box;
  min-width: var(--primitive-target-min-width);
  min-height: var(--primitive-target-min-height);
  place-items: center;
  padding-block: var(--primitive-text-action-padding-block);
  padding-inline: var(--primitive-text-action-padding-inline);
  border: 0.0625rem solid var(--primitive-text-action-border);
  border-radius: var(--primitive-text-action-radius);
  background: var(--primitive-text-action-background);
  color: var(--primitive-text-action-foreground);
  cursor: pointer;
  font: inherit;
}

.ds-text-action-button-control:focus-visible {
  outline: var(--primitive-focus-ring);
  outline-offset: var(--primitive-focus-ring-offset);
}

.ds-text-action-button-control-label {
  font-family: var(--primitive-label-font-family);
  font-size: var(--primitive-label-font-size);
  font-weight: var(--primitive-label-font-weight);
  letter-spacing: var(--primitive-label-letter-spacing);
  line-height: var(--primitive-label-line-height);
  text-transform: var(--primitive-label-text-transform);
}

.ds-icon-button-control {
  position: relative;
  display: inline-grid;
  box-sizing: border-box;
  min-width: var(--primitive-target-min-width);
  min-height: var(--primitive-target-min-height);
  place-items: center;
  border: 0;
  border-radius: calc(var(--primitive-icon-button-radius) + var(--primitive-icon-button-visual-inset));
  background: transparent;
  color: var(--primitive-icon-button-foreground);
  cursor: pointer;
  font: inherit;
}

.ds-icon-button-control::before {
  position: absolute;
  inset: var(--primitive-icon-button-visual-inset);
  z-index: 0;
  border: 0.0625rem solid var(--primitive-icon-button-border);
  border-radius: var(--primitive-icon-button-radius);
  background: var(--primitive-icon-button-background);
  content: "";
}

.ds-icon-button-control:focus-visible {
  outline: var(--primitive-focus-ring);
  outline-offset: var(--primitive-focus-ring-offset);
}

.ds-icon-button-control-glyph {
  position: relative;
  z-index: 1;
  display: block;
  inline-size: var(--primitive-icon-button-glyph-inline-size);
  block-size: var(--primitive-icon-button-glyph-block-size);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ds-index-nav-panel-header-control {
  position: sticky;
  inset-block-start: var(--primitive-index-nav-panel-header-sticky-top);
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  box-sizing: border-box;
  gap: var(--primitive-index-nav-panel-header-gap);
  align-items: center;
  min-width: 0;
  block-size: var(--primitive-index-nav-panel-header-block-size);
  min-block-size: var(--primitive-index-nav-panel-header-min-block-size);
  max-block-size: var(--primitive-index-nav-panel-header-max-block-size);
  border-block-end: 0.0625rem solid var(--primitive-index-nav-panel-header-separator);
  background: var(--primitive-index-nav-panel-header-background);
  color: var(--primitive-index-nav-panel-header-foreground);
}

.ds-index-nav-panel-header-control-title {
  display: grid;
  min-width: 0;
  margin: 0;
  overflow: visible;
  color: inherit;
  font-family: var(--primitive-index-nav-panel-header-label-font-family);
  font-size: var(--primitive-index-nav-panel-header-label-font-size);
  font-weight: var(--primitive-index-nav-panel-header-label-font-weight);
  letter-spacing: var(--primitive-index-nav-panel-header-label-letter-spacing);
  line-height: var(--primitive-index-nav-panel-header-label-line-height);
  text-transform: var(--primitive-index-nav-panel-header-label-text-transform);
}

.ds-index-nav-item-control {
  position: relative;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--primitive-item-gap);
  width: 100%;
  min-width: min(100%, var(--primitive-target-min-width));
  min-height: var(--primitive-target-min-height);
  align-items: start;
  padding-block: var(--primitive-item-padding-block);
  padding-inline: var(--primitive-item-padding-inline);
  border: 0.0625rem solid var(--primitive-item-border);
  border-radius: var(--primitive-item-radius);
  background: var(--primitive-item-background);
  color: var(--primitive-item-foreground);
  cursor: pointer;
  font: inherit;
  text-align: start;
}

.ds-index-nav-item-control:focus-visible {
  outline: var(--primitive-focus-ring);
  outline-offset: var(--primitive-focus-ring-offset);
}

.ds-index-nav-item-control:disabled {
  cursor: not-allowed;
}

.ds-index-nav-item-control-current-marker {
  display: block;
  align-self: var(--primitive-item-current-indicator-block-size-behavior);
  width: var(--primitive-item-current-indicator-inline-size);
  min-height: var(--primitive-item-current-indicator-min-block-size);
  border-radius: var(--primitive-item-current-indicator-radius);
  background: transparent;
}

.ds-index-nav-item-control[aria-current="true"] .ds-index-nav-item-control-current-marker {
  background: var(--primitive-item-current-indicator-color);
}

.ds-index-nav-item-control-content {
  display: grid;
  min-width: 0;
  gap: var(--primitive-item-gap);
}

.ds-index-nav-item-control-label,
.ds-index-nav-item-control-supporting {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-index-nav-item-control-label {
  font-family: var(--primitive-label-font-family);
  font-size: var(--primitive-label-font-size);
  font-weight: var(--primitive-label-font-weight);
  letter-spacing: var(--primitive-label-letter-spacing);
  line-height: var(--primitive-label-line-height);
  text-transform: var(--primitive-label-text-transform);
}

.ds-index-nav-item-control-supporting {
  font-family: var(--primitive-supporting-font-family);
  font-size: var(--primitive-supporting-font-size);
  font-weight: var(--primitive-supporting-font-weight);
  letter-spacing: var(--primitive-supporting-letter-spacing);
  line-height: var(--primitive-supporting-line-height);
  text-transform: var(--primitive-supporting-text-transform);
}

.ds-index-nav-item-control-tooltip {
  position: fixed;
  z-index: var(--primitive-tooltip-z-index);
  inset-block-start: var(--primitive-index-nav-item-tooltip-top, 0);
  inset-inline-start: var(--primitive-index-nav-item-tooltip-left, 0);
  display: block;
  box-sizing: border-box;
  width: min(max-content, var(--primitive-tooltip-max-inline-size), calc(100vw - 4rem));
  max-width: min(var(--primitive-tooltip-max-inline-size), calc(100vw - 4rem));
  padding: var(--primitive-tooltip-padding-block) var(--primitive-tooltip-padding-inline);
  border: 0.0625rem solid var(--primitive-tooltip-border);
  border-radius: var(--primitive-tooltip-radius);
  background: var(--primitive-tooltip-background);
  box-shadow: var(--primitive-tooltip-shadow);
  color: var(--primitive-tooltip-foreground);
  font-family: var(--primitive-tooltip-font-family);
  font-size: var(--primitive-tooltip-font-size);
  font-weight: var(--primitive-tooltip-font-weight);
  letter-spacing: var(--primitive-tooltip-letter-spacing);
  line-height: var(--primitive-tooltip-line-height);
  opacity: 0;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: start;
  text-transform: var(--primitive-tooltip-text-transform);
  transform: translateY(0.2rem);
  transition:
    opacity var(--primitive-tooltip-motion-duration) var(--primitive-tooltip-motion-easing),
    transform var(--primitive-tooltip-motion-duration) var(--primitive-tooltip-motion-easing);
  visibility: hidden;
}

[dir="rtl"] .ds-index-nav-item-control-tooltip {
  inset-inline-start: var(--primitive-index-nav-item-tooltip-left, 0);
  inset-inline-end: auto;
}

.ds-index-nav-item-control[data-index-nav-item-control-overflow="true"][data-index-nav-item-control-open="true"] .ds-index-nav-item-control-tooltip {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.token-spec-preview-label,
.token-spec-card h3,
.token-spec-card h4 {
  margin: 0;
}

.token-spec-card h3 {
  font-size: 1.05rem;
}

.token-spec-card h4 {
  font-size: 0.82rem;
}

.token-spec-card code {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.22rem 0.4rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent) 5%, var(--paper));
  color: var(--ink);
  font-size: 0.78rem;
}

.token-spec-definition-grid,
.token-spec-mini-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.token-spec-definition-grid div,
.token-spec-mini-list div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 0.6fr) minmax(0, 1fr);
  gap: 0.6rem;
}

.token-spec-card dt {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.token-spec-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.token-spec-usage ul,
.token-spec-note ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding-inline-start: 1.1rem;
}

.token-spec-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-block-start: 0.4rem;
  border-top: 0.0625rem solid var(--line);
}

.token-spec-note {
  padding: 1rem;
  border: 0.0625rem solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
}

@media (max-width: 72rem) {
  .token-spec-stage,
  .token-spec-diagnostic-control,
  .token-spec-diagnostic-previews,
  .token-spec-card,
  .token-spec-two-column {
    grid-template-columns: 1fr;
  }

  .token-spec-card > * + * {
    border-inline-start: 0;
    border-block-start: 0.0625rem solid var(--line);
  }
}

@media (max-width: 44rem) {
  .token-spec-page {
    padding-inline: 0;
  }

  .token-spec-section-header {
    display: grid;
  }

  .token-spec-definition-grid div,
  .token-spec-mini-list div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .primitive-proof-row {
    grid-template-columns: 1fr;
  }
}