:root {
  --recipe-color-primary: #58dff2;
  --recipe-color-primary-hover: #8cebfa;
  --recipe-color-on-primary: #082f36;
  --recipe-color-canvas: #130d14;
  --recipe-color-surface: #192733;
  --recipe-color-surface-muted: #241a24;
  --recipe-color-secondary: #3e2b20;
  --recipe-color-accent: #f2bd4e;
  --recipe-color-text: #f5f6f2;
  --recipe-color-text-muted: #b8bec5;
  --recipe-color-border: #526773;
  --recipe-color-attention: #f05a7e;
  --recipe-color-on-attention: #24100f;
  --recipe-color-success: #4fd18b;
  --recipe-color-warning: #f2bd4e;
  --recipe-color-error: #ff7893;
  --recipe-color-disabled: #2b2c30;
  --recipe-color-disabled-text: #9da3a9;
  --recipe-color-tooltip: #09070a;
  --recipe-color-on-tooltip: #f5f6f2;
  --recipe-spacing-xs: 4px;
  --recipe-spacing-sm: 8px;
  --recipe-spacing-md: 16px;
  --recipe-spacing-lg: 24px;
  --recipe-spacing-xl: 40px;
  --recipe-spacing-section: 88px;
  --recipe-rounded-none: 0px;
  --recipe-rounded-sm: 12px;
  --recipe-rounded-md: 18px;
  --recipe-rounded-lg: 26px;
  --recipe-rounded-full: 9999px;
  --recipe-type-display-font-family: Impact, Haettenschweiler, Arial Black, sans-serif;
  --recipe-type-display-font-size: 7.6rem;
  --recipe-type-display-font-weight: 900;
  --recipe-type-display-line-height: 0.98em;
  --recipe-type-display-letter-spacing: 0.015em;
  --recipe-type-h1-font-family: Impact, Haettenschweiler, Arial Black, sans-serif;
  --recipe-type-h1-font-size: 5rem;
  --recipe-type-h1-font-weight: 900;
  --recipe-type-h1-line-height: 1em;
  --recipe-type-h1-letter-spacing: 0.015em;
  --recipe-type-h2-font-family: Impact, Haettenschweiler, Arial Black, sans-serif;
  --recipe-type-h2-font-size: 3.8rem;
  --recipe-type-h2-font-weight: 900;
  --recipe-type-h2-line-height: 1em;
  --recipe-type-h2-letter-spacing: 0.015em;
  --recipe-type-h3-font-family: Impact, Haettenschweiler, Arial Black, sans-serif;
  --recipe-type-h3-font-size: 1.45rem;
  --recipe-type-h3-font-weight: 900;
  --recipe-type-h3-line-height: 1.08em;
  --recipe-type-h3-letter-spacing: 0.015em;
  --recipe-type-body-lg-font-family: Trebuchet MS, Arial, sans-serif;
  --recipe-type-body-lg-font-size: 1.125rem;
  --recipe-type-body-lg-font-weight: 400;
  --recipe-type-body-lg-line-height: 1.6em;
  --recipe-type-body-font-family: Trebuchet MS, Arial, sans-serif;
  --recipe-type-body-font-size: 1rem;
  --recipe-type-body-font-weight: 400;
  --recipe-type-body-line-height: 1.6em;
  --recipe-type-body-sm-font-family: Trebuchet MS, Arial, sans-serif;
  --recipe-type-body-sm-font-size: 0.875rem;
  --recipe-type-body-sm-font-weight: 400;
  --recipe-type-body-sm-line-height: 1.5em;
  --recipe-type-label-font-family: Trebuchet MS, Arial, sans-serif;
  --recipe-type-label-font-size: 0.75rem;
  --recipe-type-label-font-weight: 800;
  --recipe-type-label-line-height: 1.2em;
  --recipe-type-label-letter-spacing: 0.08em;
  --recipe-type-caption-font-family: Trebuchet MS, Arial, sans-serif;
  --recipe-type-caption-font-size: 0.75rem;
  --recipe-type-caption-font-weight: 400;
  --recipe-type-caption-line-height: 1.45em;
  --recipe-type-data-font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --recipe-type-data-font-size: 0.875rem;
  --recipe-type-data-font-weight: 800;
  --recipe-type-data-line-height: 1.4em;
  --recipe-contract-typography-property-count: 45;
  --recipe-component-page-backgroundcolor: #130d14;
  --recipe-component-page-textcolor: #f5f6f2;
  --recipe-component-button-standard-typography-font-family: Trebuchet MS, Arial, sans-serif;
  --recipe-component-button-standard-typography-font-size: 0.75rem;
  --recipe-component-button-standard-typography-font-weight: 800;
  --recipe-component-button-standard-typography-line-height: 1.2em;
  --recipe-component-button-standard-typography-letter-spacing: 0.08em;
  --recipe-component-button-primary-backgroundcolor: #58dff2;
  --recipe-component-button-primary-textcolor: #082f36;
  --recipe-component-button-primary-rounded: 18px;
  --recipe-component-button-primary-padding: 12px;
  --recipe-component-button-primary-height: 48px;
  --recipe-component-button-primary-hover-backgroundcolor: #8cebfa;
  --recipe-component-button-primary-hover-textcolor: #082f36;
  --recipe-component-button-secondary-backgroundcolor: #3e2b20;
  --recipe-component-button-secondary-textcolor: #f5f6f2;
  --recipe-component-button-secondary-rounded: 18px;
  --recipe-component-button-secondary-padding: 12px;
  --recipe-component-button-secondary-height: 48px;
  --recipe-component-button-attention-backgroundcolor: #f2bd4e;
  --recipe-component-button-attention-textcolor: #24100f;
  --recipe-component-button-attention-rounded: 18px;
  --recipe-component-button-attention-padding: 12px;
  --recipe-component-button-attention-height: 48px;
  --recipe-component-button-disabled-backgroundcolor: #2b2c30;
  --recipe-component-button-disabled-textcolor: #9da3a9;
  --recipe-component-button-disabled-rounded: 18px;
  --recipe-component-card-standard-backgroundcolor: #192733;
  --recipe-component-card-standard-textcolor: #f5f6f2;
  --recipe-component-card-standard-rounded: 18px;
  --recipe-component-card-standard-padding: 24px;
  --recipe-component-card-featured-backgroundcolor: #3e2b20;
  --recipe-component-card-featured-textcolor: #f5f6f2;
  --recipe-component-card-featured-rounded: 18px;
  --recipe-component-card-featured-padding: 24px;
  --recipe-component-field-backgroundcolor: #241a24;
  --recipe-component-field-textcolor: #f5f6f2;
  --recipe-component-field-rounded: 12px;
  --recipe-component-field-padding: 12px;
  --recipe-component-field-height: 48px;
  --recipe-component-checkbox-control-backgroundcolor: #241a24;
  --recipe-component-checkbox-control-textcolor: #58dff2;
  --recipe-component-checkbox-control-rounded: 12px;
  --recipe-component-checkbox-control-size: 20px;
  --recipe-component-checkbox-control-checked-backgroundcolor: #58dff2;
  --recipe-component-checkbox-control-checked-textcolor: #082f36;
  --recipe-component-checkbox-control-checked-rounded: 12px;
  --recipe-component-checkbox-control-checked-size: 20px;
  --recipe-component-checkbox-control-disabled-backgroundcolor: #2b2c30;
  --recipe-component-checkbox-control-disabled-textcolor: #9da3a9;
  --recipe-component-checkbox-control-disabled-rounded: 12px;
  --recipe-component-checkbox-control-disabled-size: 20px;
  --recipe-component-radio-control-backgroundcolor: #241a24;
  --recipe-component-radio-control-textcolor: #58dff2;
  --recipe-component-radio-control-rounded: 9999px;
  --recipe-component-radio-control-size: 20px;
  --recipe-component-radio-control-checked-backgroundcolor: #241a24;
  --recipe-component-radio-control-checked-textcolor: #58dff2;
  --recipe-component-radio-control-checked-rounded: 9999px;
  --recipe-component-radio-control-checked-size: 20px;
  --recipe-component-radio-control-disabled-backgroundcolor: #2b2c30;
  --recipe-component-radio-control-disabled-textcolor: #9da3a9;
  --recipe-component-radio-control-disabled-rounded: 9999px;
  --recipe-component-radio-control-disabled-size: 20px;
  --recipe-component-switch-track-backgroundcolor: #241a24;
  --recipe-component-switch-track-textcolor: #b8bec5;
  --recipe-component-switch-track-rounded: 9999px;
  --recipe-component-switch-track-width: 48px;
  --recipe-component-switch-track-height: 26px;
  --recipe-component-switch-track-checked-backgroundcolor: #58dff2;
  --recipe-component-switch-track-checked-textcolor: #082f36;
  --recipe-component-switch-track-checked-rounded: 9999px;
  --recipe-component-switch-track-checked-width: 48px;
  --recipe-component-switch-track-checked-height: 26px;
  --recipe-component-switch-track-disabled-backgroundcolor: #2b2c30;
  --recipe-component-switch-track-disabled-textcolor: #9da3a9;
  --recipe-component-switch-track-disabled-rounded: 9999px;
  --recipe-component-switch-track-disabled-width: 48px;
  --recipe-component-switch-track-disabled-height: 26px;
  --recipe-component-switch-thumb-backgroundcolor: #b8bec5;
  --recipe-component-switch-thumb-textcolor: #241a24;
  --recipe-component-switch-thumb-rounded: 9999px;
  --recipe-component-switch-thumb-size: 18px;
  --recipe-component-switch-thumb-checked-backgroundcolor: #082f36;
  --recipe-component-switch-thumb-checked-textcolor: #58dff2;
  --recipe-component-switch-thumb-checked-rounded: 9999px;
  --recipe-component-switch-thumb-checked-size: 18px;
  --recipe-component-switch-thumb-disabled-backgroundcolor: #9da3a9;
  --recipe-component-switch-thumb-disabled-textcolor: #2b2c30;
  --recipe-component-switch-thumb-disabled-rounded: 9999px;
  --recipe-component-switch-thumb-disabled-size: 18px;
  --recipe-component-list-row-height: 48px;
  --recipe-component-table-cell-padding: 10px;
  --recipe-component-loading-bar-height: 10px;
  --recipe-component-tab-selected-backgroundcolor: #58dff2;
  --recipe-component-tab-selected-textcolor: #082f36;
  --recipe-component-tab-selected-rounded: 12px;
  --recipe-component-tab-selected-padding: 8px;
  --recipe-component-status-success-backgroundcolor: #4fd18b;
  --recipe-component-status-success-textcolor: #130d14;
  --recipe-component-status-success-rounded: 9999px;
  --recipe-component-status-warning-backgroundcolor: #f2bd4e;
  --recipe-component-status-warning-textcolor: #24100f;
  --recipe-component-status-warning-rounded: 9999px;
  --recipe-component-status-error-backgroundcolor: #ff7893;
  --recipe-component-status-error-textcolor: #130d14;
  --recipe-component-status-error-rounded: 9999px;
  --recipe-component-tooltip-backgroundcolor: #09070a;
  --recipe-component-tooltip-textcolor: #f5f6f2;
  --recipe-component-tooltip-rounded: 12px;
  --recipe-component-tooltip-padding: 8px;
  --recipe-component-muted-surface-backgroundcolor: #241a24;
  --recipe-component-muted-surface-textcolor: #b8bec5;
  --recipe-component-muted-surface-rounded: 12px;
  --recipe-component-attention-label-backgroundcolor: #f05a7e;
  --recipe-component-attention-label-textcolor: #24100f;
  --recipe-component-attention-label-rounded: 9999px;
  --recipe-component-accent-label-backgroundcolor: #3e2b20;
  --recipe-component-accent-label-textcolor: #f2bd4e;
  --recipe-component-accent-label-rounded: 9999px;
  --recipe-component-border-sample-backgroundcolor: #526773;
  --recipe-component-border-sample-textcolor: #f5f6f2;
  --recipe-component-border-sample-rounded: 18px;
}


body {
  background-color: var(--recipe-component-page-backgroundcolor) !important;
  color: var(--recipe-component-page-textcolor) !important;
}

.ui-button {
  font-family: var(--recipe-component-button-standard-typography-font-family) !important;
  font-size: var(--recipe-component-button-standard-typography-font-size) !important;
  font-weight: var(--recipe-component-button-standard-typography-font-weight) !important;
  line-height: var(--recipe-component-button-standard-typography-line-height) !important;
  letter-spacing: var(--recipe-component-button-standard-typography-letter-spacing) !important;
}

.ui-button--primary {
  background-color: var(--recipe-component-button-primary-backgroundcolor) !important;
  color: var(--recipe-component-button-primary-textcolor) !important;
  border-radius: var(--recipe-component-button-primary-rounded) !important;
  padding: var(--recipe-component-button-primary-padding) !important;
  min-height: var(--recipe-component-button-primary-height) !important;
}

.ui-button--primary:hover,
.ui-button--primary.is-hover {
  background-color: var(--recipe-component-button-primary-hover-backgroundcolor) !important;
  color: var(--recipe-component-button-primary-hover-textcolor) !important;
}

.ui-button--secondary {
  background-color: var(--recipe-component-button-secondary-backgroundcolor) !important;
  color: var(--recipe-component-button-secondary-textcolor) !important;
  border-radius: var(--recipe-component-button-secondary-rounded) !important;
  padding: var(--recipe-component-button-secondary-padding) !important;
  min-height: var(--recipe-component-button-secondary-height) !important;
}

.ui-button--attention {
  background-color: var(--recipe-component-button-attention-backgroundcolor) !important;
  color: var(--recipe-component-button-attention-textcolor) !important;
  border-radius: var(--recipe-component-button-attention-rounded) !important;
  padding: var(--recipe-component-button-attention-padding) !important;
  min-height: var(--recipe-component-button-attention-height) !important;
}

.ui-button--disabled,
.ui-button:disabled {
  background-color: var(--recipe-component-button-disabled-backgroundcolor) !important;
  color: var(--recipe-component-button-disabled-textcolor) !important;
  border-radius: var(--recipe-component-button-disabled-rounded) !important;
}

.card {
  background-color: var(--recipe-component-card-standard-backgroundcolor) !important;
  color: var(--recipe-component-card-standard-textcolor) !important;
  border-radius: var(--recipe-component-card-standard-rounded) !important;
  padding: var(--recipe-component-card-standard-padding) !important;
}

.card--featured {
  background-color: var(--recipe-component-card-featured-backgroundcolor) !important;
  color: var(--recipe-component-card-featured-textcolor) !important;
  border-radius: var(--recipe-component-card-featured-rounded) !important;
  padding: var(--recipe-component-card-featured-padding) !important;
}

.field {
  background-color: var(--recipe-component-field-backgroundcolor) !important;
  color: var(--recipe-component-field-textcolor) !important;
  border-radius: var(--recipe-component-field-rounded) !important;
  padding: var(--recipe-component-field-padding) !important;
  min-height: var(--recipe-component-field-height) !important;
}

.choice-indicator--checkbox {
  background-color: var(--recipe-component-checkbox-control-backgroundcolor) !important;
  color: var(--recipe-component-checkbox-control-textcolor) !important;
  border-radius: var(--recipe-component-checkbox-control-rounded) !important;
  width: var(--recipe-component-checkbox-control-size) !important;
  height: var(--recipe-component-checkbox-control-size) !important;
}

.choice-input[type="checkbox"]:not([role="switch"]):checked + .choice-indicator--checkbox {
  background-color: var(--recipe-component-checkbox-control-checked-backgroundcolor) !important;
  color: var(--recipe-component-checkbox-control-checked-textcolor) !important;
  border-radius: var(--recipe-component-checkbox-control-checked-rounded) !important;
  width: var(--recipe-component-checkbox-control-checked-size) !important;
  height: var(--recipe-component-checkbox-control-checked-size) !important;
}

.choice-input[type="checkbox"]:not([role="switch"]):disabled + .choice-indicator--checkbox {
  background-color: var(--recipe-component-checkbox-control-disabled-backgroundcolor) !important;
  color: var(--recipe-component-checkbox-control-disabled-textcolor) !important;
  border-radius: var(--recipe-component-checkbox-control-disabled-rounded) !important;
  width: var(--recipe-component-checkbox-control-disabled-size) !important;
  height: var(--recipe-component-checkbox-control-disabled-size) !important;
}

.choice-indicator--radio {
  background-color: var(--recipe-component-radio-control-backgroundcolor) !important;
  color: var(--recipe-component-radio-control-textcolor) !important;
  border-radius: var(--recipe-component-radio-control-rounded) !important;
  width: var(--recipe-component-radio-control-size) !important;
  height: var(--recipe-component-radio-control-size) !important;
}

.choice-input[type="radio"]:checked + .choice-indicator--radio {
  background-color: var(--recipe-component-radio-control-checked-backgroundcolor) !important;
  color: var(--recipe-component-radio-control-checked-textcolor) !important;
  border-radius: var(--recipe-component-radio-control-checked-rounded) !important;
  width: var(--recipe-component-radio-control-checked-size) !important;
  height: var(--recipe-component-radio-control-checked-size) !important;
}

.choice-input[type="radio"]:disabled + .choice-indicator--radio {
  background-color: var(--recipe-component-radio-control-disabled-backgroundcolor) !important;
  color: var(--recipe-component-radio-control-disabled-textcolor) !important;
  border-radius: var(--recipe-component-radio-control-disabled-rounded) !important;
  width: var(--recipe-component-radio-control-disabled-size) !important;
  height: var(--recipe-component-radio-control-disabled-size) !important;
}

.switch-track {
  background-color: var(--recipe-component-switch-track-backgroundcolor) !important;
  color: var(--recipe-component-switch-track-textcolor) !important;
  border-radius: var(--recipe-component-switch-track-rounded) !important;
  width: var(--recipe-component-switch-track-width) !important;
  min-height: var(--recipe-component-switch-track-height) !important;
}

.choice-input[type="checkbox"][role="switch"]:checked + .switch-track {
  background-color: var(--recipe-component-switch-track-checked-backgroundcolor) !important;
  color: var(--recipe-component-switch-track-checked-textcolor) !important;
  border-radius: var(--recipe-component-switch-track-checked-rounded) !important;
  width: var(--recipe-component-switch-track-checked-width) !important;
  min-height: var(--recipe-component-switch-track-checked-height) !important;
}

.choice-input[type="checkbox"][role="switch"]:disabled + .switch-track {
  background-color: var(--recipe-component-switch-track-disabled-backgroundcolor) !important;
  color: var(--recipe-component-switch-track-disabled-textcolor) !important;
  border-radius: var(--recipe-component-switch-track-disabled-rounded) !important;
  width: var(--recipe-component-switch-track-disabled-width) !important;
  min-height: var(--recipe-component-switch-track-disabled-height) !important;
}

.switch-thumb {
  background-color: var(--recipe-component-switch-thumb-backgroundcolor) !important;
  color: var(--recipe-component-switch-thumb-textcolor) !important;
  border-radius: var(--recipe-component-switch-thumb-rounded) !important;
  width: var(--recipe-component-switch-thumb-size) !important;
  height: var(--recipe-component-switch-thumb-size) !important;
}

.choice-input[type="checkbox"][role="switch"]:checked + .switch-track > .switch-thumb {
  background-color: var(--recipe-component-switch-thumb-checked-backgroundcolor) !important;
  color: var(--recipe-component-switch-thumb-checked-textcolor) !important;
  border-radius: var(--recipe-component-switch-thumb-checked-rounded) !important;
  width: var(--recipe-component-switch-thumb-checked-size) !important;
  height: var(--recipe-component-switch-thumb-checked-size) !important;
}

.choice-input[type="checkbox"][role="switch"]:disabled + .switch-track > .switch-thumb {
  background-color: var(--recipe-component-switch-thumb-disabled-backgroundcolor) !important;
  color: var(--recipe-component-switch-thumb-disabled-textcolor) !important;
  border-radius: var(--recipe-component-switch-thumb-disabled-rounded) !important;
  width: var(--recipe-component-switch-thumb-disabled-size) !important;
  height: var(--recipe-component-switch-thumb-disabled-size) !important;
}

.list-sample li {
  min-height: var(--recipe-component-list-row-height) !important;
}

caption,
th,
td {
  padding: var(--recipe-component-table-cell-padding) !important;
}

.loading-bar {
  min-height: var(--recipe-component-loading-bar-height) !important;
}

.tab[aria-selected="true"] {
  background-color: var(--recipe-component-tab-selected-backgroundcolor) !important;
  color: var(--recipe-component-tab-selected-textcolor) !important;
  border-radius: var(--recipe-component-tab-selected-rounded) !important;
  padding: var(--recipe-component-tab-selected-padding) !important;
}

.badge--success,
.status--ready {
  background-color: var(--recipe-component-status-success-backgroundcolor) !important;
  color: var(--recipe-component-status-success-textcolor) !important;
  border-radius: var(--recipe-component-status-success-rounded) !important;
}

.badge--warning,
.status--pending {
  background-color: var(--recipe-component-status-warning-backgroundcolor) !important;
  color: var(--recipe-component-status-warning-textcolor) !important;
  border-radius: var(--recipe-component-status-warning-rounded) !important;
}

.badge--error {
  background-color: var(--recipe-component-status-error-backgroundcolor) !important;
  color: var(--recipe-component-status-error-textcolor) !important;
  border-radius: var(--recipe-component-status-error-rounded) !important;
}

.tooltip {
  background-color: var(--recipe-component-tooltip-backgroundcolor) !important;
  color: var(--recipe-component-tooltip-textcolor) !important;
  border-radius: var(--recipe-component-tooltip-rounded) !important;
  padding: var(--recipe-component-tooltip-padding) !important;
}

.tab-panel,
.code-row,
.callout,
.popover > div {
  background-color: var(--recipe-component-muted-surface-backgroundcolor) !important;
  color: var(--recipe-component-muted-surface-textcolor) !important;
  border-radius: var(--recipe-component-muted-surface-rounded) !important;
}

.badge--attention {
  background-color: var(--recipe-component-attention-label-backgroundcolor) !important;
  color: var(--recipe-component-attention-label-textcolor) !important;
  border-radius: var(--recipe-component-attention-label-rounded) !important;
}

.badge:not(.badge--attention):not(.badge--success):not(.badge--warning):not(.badge--error),
.status:not(.status--ready):not(.status--pending):not(.status--unavailable) {
  background-color: var(--recipe-component-accent-label-backgroundcolor) !important;
  color: var(--recipe-component-accent-label-textcolor) !important;
  border-radius: var(--recipe-component-accent-label-rounded) !important;
}

.shape--border-sample {
  background-color: var(--recipe-component-border-sample-backgroundcolor) !important;
  color: var(--recipe-component-border-sample-textcolor) !important;
  border-radius: var(--recipe-component-border-sample-rounded) !important;
}