html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
}

[hidden] {
  display: none !important;
}

[data-module=compositor] {
  --Red: 338 100% 50%;
  --Orange: 15 100% 50%;
  --Yellow: 50 100% 50%;
  --Green: 145 70% 50%;
  --LightBlue: 194 100% 50%;
  --Blue: 210 100% 50%;
  --DeepPurple: 262 80% 60%;
  --Pink: 330 100% 80%;
  --primary: 100%;
  --secondary: 64%;
  --disabled: 32%;
  --border: 12%;
  --background: 8%;
  --Error: var(--Red);
  --Success: var(--Green);
  --Warning: var(--Orange);
  --content-primary: hsl(var(--content) / var(--primary));
  --content-secondary: hsl(var(--content) / var(--secondary));
  --content-disabled: hsl(var(--content) / var(--disabled));
  --content-border: hsl(var(--content) / var(--border));
  --content-background: hsl(var(--content) / var(--background));
  --accent-primary: hsl(var(--accent) / var(--primary));
  --accent-secondary: hsl(var(--accent) / var(--secondary));
  --accent-disabled: hsl(var(--accent) / var(--disabled));
  --accent-border: hsl(var(--accent) / var(--border));
  --accent-background: hsl(var(--accent) / var(--background));
}

[data-module=compositor].themeLight {
  --content: var(--hue) 40% 20%;
  --inverse: var(--hue) 0% 100%;
  --view: var(--hue) 0% 100%;
  --nav: var(--hue) 24% 97%;
}
[data-module=compositor].themeDark {
  --content: var(--hue) 0% 100%;
  --inverse: var(--hue) 24% 8%;
  --view: var(--hue) 24% 8%;
  --nav: var(--hue) 20% 12%;
}

[data-module=compositor].accentRed {
  --hue: 338;
  --accent: var(--Red);
}
[data-module=compositor].accentOrange {
  --hue: 15;
  --accent: var(--Orange);
}
[data-module=compositor].accentYellow {
  --hue: 50;
  --accent: var(--Yellow);
}
[data-module=compositor].accentGreen {
  --hue: 145;
  --accent: var(--Green);
}
[data-module=compositor].accentLightBlue {
  --hue: 194;
  --accent: var(--LightBlue);
}
[data-module=compositor].accentBlue {
  --hue: 210;
  --accent: var(--Blue);
}
[data-module=compositor].accentDeepPurple {
  --hue: 262;
  --accent: var(--DeepPurple);
}
[data-module=compositor].accentPink {
  --hue: 330;
  --accent: var(--Pink);
}

[data-module].colorContent {
  --color: var(--content);
}

[data-module].colorAccent {
  --color: var(--accent);
}

[data-module].colorInverse {
  --color: var(--inverse);
}

[data-module].colorError {
  --color: var(--Error);
}

[data-module].colorSuccess {
  --color: var(--Success);
}

[data-module].colorWarning {
  --color: var(--Warning);
}

[data-module].colorRed {
  --color: var(--Red);
}

[data-module].colorOrange {
  --color: var(--Orange);
}

[data-module].colorYellow {
  --color: var(--Yellow);
}

[data-module].colorGreen {
  --color: var(--Green);
}

[data-module].colorLightBlue {
  --color: var(--LightBlue);
}

[data-module].colorBlue {
  --color: var(--Blue);
}

[data-module].colorDeepPurple {
  --color: var(--DeepPurple);
}

[data-module].colorPink {
  --color: var(--Pink);
}

[data-module].contrastPrimary {
  --contrast: var(--primary);
}

[data-module].contrastSecondary {
  --contrast: var(--secondary);
}

[data-module].contrastDisabled {
  --contrast: var(--disabled);
}

[data-module].surfaceView {
  background: hsl(var(--view));
}

[data-module].surfaceNav {
  background: hsl(var(--nav));
}

[data-module].surfaceAccent {
  background: hsl(var(--accent));
}

[data-module].surfaceInverse {
  background: hsl(var(--content));
}

[data-module].surfaceRed {
  background: hsl(var(--Red));
}

[data-module].surfaceOrange {
  background: hsl(var(--Orange));
}

[data-module].surfaceYellow {
  background: hsl(var(--Yellow));
}

[data-module].surfaceGreen {
  background: hsl(var(--Green));
}

[data-module].surfaceLightBlue {
  background: hsl(var(--LightBlue));
}

[data-module].surfaceBlue {
  background: hsl(var(--Blue));
}

[data-module].surfaceDeepPurple {
  background: hsl(var(--DeepPurple));
}

[data-module].surfacePink {
  background: hsl(var(--Pink));
}

[data-module].sizeXS {
  font-size: 14px;
}
[data-module].sizeSM {
  font-size: 16px;
  line-height: 24px;
}
[data-module].sizeMD {
  font-size: 20px;
}
[data-module].sizeLG {
  font-size: 24px;
}
[data-module].sizeXL {
  font-size: 40px;
}
[data-module].sizeXXL {
  font-size: 64px;
}

[data-module].contextSection {
  --block-padding-XS: 40px;
  --block-padding-SM: 60px;
  --block-padding-MD: 80px;
  --block-padding-LG: 100px;
  --block-padding-XL: 120px;
  --block-padding-XXL: 160px;
  --block-gap-XS: 8px;
  --block-gap-SM: 12px;
  --block-gap-MD: 16px;
  --block-gap-LG: 24px;
  --block-gap-XL: 32px;
  --block-gap-XXL: 40px;
  --block-radius-XS: 8px;
  --block-radius-SM: 12px;
  --block-radius-MD: 16px;
  --block-radius-LG: 20px;
  --block-radius-XL: 24px;
  --block-radius-XXL: 32px;
}
[data-module].contextCard {
  --block-padding-XS: 8px;
  --block-padding-SM: 12px;
  --block-padding-MD: 16px;
  --block-padding-LG: 20px;
  --block-padding-XL: 24px;
  --block-padding-XXL: 32px;
  --block-gap-XS: 4px;
  --block-gap-SM: 8px;
  --block-gap-MD: 12px;
  --block-gap-LG: 16px;
  --block-gap-XL: 20px;
  --block-gap-XXL: 24px;
  --block-radius-XS: 8px;
  --block-radius-SM: 12px;
  --block-radius-MD: 16px;
  --block-radius-LG: 20px;
  --block-radius-XL: 24px;
  --block-radius-XXL: 32px;
}
[data-module].contextControl {
  --block-padding-XS: 4px;
  --block-padding-SM: 8px;
  --block-padding-MD: 12px;
  --block-padding-LG: 16px;
  --block-padding-XL: 20px;
  --block-padding-XXL: 24px;
  --block-gap-XS: 4px;
  --block-gap-SM: 8px;
  --block-gap-MD: 12px;
  --block-gap-LG: 16px;
  --block-gap-XL: 20px;
  --block-gap-XXL: 24px;
  --block-radius-XS: 4px;
  --block-radius-SM: 8px;
  --block-radius-MD: 12px;
  --block-radius-LG: 16px;
  --block-radius-XL: 20px;
  --block-radius-XXL: 24px;
}

[data-module].paddingXS {
  padding: var(--block-padding-XS);
}
[data-module].paddingSM {
  padding: var(--block-padding-SM);
}
[data-module].paddingMD {
  padding: var(--block-padding-MD);
}
[data-module].paddingLG {
  padding: var(--block-padding-LG);
}
[data-module].paddingXL {
  padding: var(--block-padding-XL);
}
[data-module].paddingXXL {
  padding: var(--block-padding-XXL);
}
[data-module].paddingNone {
  padding: 0;
}

[data-module].paddingXXS {
  padding-left: var(--block-padding-XS);
  padding-right: var(--block-padding-XS);
}
[data-module].paddingXSM {
  padding-left: var(--block-padding-SM);
  padding-right: var(--block-padding-SM);
}
[data-module].paddingXMD {
  padding-left: var(--block-padding-MD);
  padding-right: var(--block-padding-MD);
}
[data-module].paddingXLG {
  padding-left: var(--block-padding-LG);
  padding-right: var(--block-padding-LG);
}
[data-module].paddingXXL {
  padding-left: var(--block-padding-XL);
  padding-right: var(--block-padding-XL);
}
[data-module].paddingXXXL {
  padding-left: var(--block-padding-XXL);
  padding-right: var(--block-padding-XXL);
}
[data-module].paddingXNone {
  padding-left: 0;
  padding-right: 0;
}

[data-module].paddingYXS {
  padding-top: var(--block-padding-XS);
  padding-bottom: var(--block-padding-XS);
}
[data-module].paddingYSM {
  padding-top: var(--block-padding-SM);
  padding-bottom: var(--block-padding-SM);
}
[data-module].paddingYMD {
  padding-top: var(--block-padding-MD);
  padding-bottom: var(--block-padding-MD);
}
[data-module].paddingYLG {
  padding-top: var(--block-padding-LG);
  padding-bottom: var(--block-padding-LG);
}
[data-module].paddingYXL {
  padding-top: var(--block-padding-XL);
  padding-bottom: var(--block-padding-XL);
}
[data-module].paddingYXXL {
  padding-top: var(--block-padding-XXL);
  padding-bottom: var(--block-padding-XXL);
}
[data-module].paddingYNone {
  padding-top: 0;
  padding-bottom: 0;
}

[data-module].paddingTopXS {
  padding-top: var(--block-padding-XS);
}
[data-module].paddingTopSM {
  padding-top: var(--block-padding-SM);
}
[data-module].paddingTopMD {
  padding-top: var(--block-padding-MD);
}
[data-module].paddingTopLG {
  padding-top: var(--block-padding-LG);
}
[data-module].paddingTopXL {
  padding-top: var(--block-padding-XL);
}
[data-module].paddingTopXXL {
  padding-top: var(--block-padding-XXL);
}
[data-module].paddingTopNone {
  padding-top: 0;
}

[data-module].paddingRightXS {
  padding-right: var(--block-padding-XS);
}
[data-module].paddingRightSM {
  padding-right: var(--block-padding-SM);
}
[data-module].paddingRightMD {
  padding-right: var(--block-padding-MD);
}
[data-module].paddingRightLG {
  padding-right: var(--block-padding-LG);
}
[data-module].paddingRightXL {
  padding-right: var(--block-padding-XL);
}
[data-module].paddingRightXXL {
  padding-right: var(--block-padding-XXL);
}
[data-module].paddingRightNone {
  padding-right: 0;
}

[data-module].paddingBottomXS {
  padding-bottom: var(--block-padding-XS);
}
[data-module].paddingBottomSM {
  padding-bottom: var(--block-padding-SM);
}
[data-module].paddingBottomMD {
  padding-bottom: var(--block-padding-MD);
}
[data-module].paddingBottomLG {
  padding-bottom: var(--block-padding-LG);
}
[data-module].paddingBottomXL {
  padding-bottom: var(--block-padding-XL);
}
[data-module].paddingBottomXXL {
  padding-bottom: var(--block-padding-XXL);
}
[data-module].paddingBottomNone {
  padding-bottom: 0;
}

[data-module].paddingLeftXS {
  padding-left: var(--block-padding-XS);
}
[data-module].paddingLeftSM {
  padding-left: var(--block-padding-SM);
}
[data-module].paddingLeftMD {
  padding-left: var(--block-padding-MD);
}
[data-module].paddingLeftLG {
  padding-left: var(--block-padding-LG);
}
[data-module].paddingLeftXL {
  padding-left: var(--block-padding-XL);
}
[data-module].paddingLeftXXL {
  padding-left: var(--block-padding-XXL);
}
[data-module].paddingLeftNone {
  padding-left: 0;
}

[data-module].radiusXS {
  border-radius: var(--block-radius-XS);
}
[data-module].radiusSM {
  border-radius: var(--block-radius-SM);
}
[data-module].radiusMD {
  border-radius: var(--block-radius-MD);
}
[data-module].radiusLG {
  border-radius: var(--block-radius-LG);
}
[data-module].radiusXL {
  border-radius: var(--block-radius-XL);
}
[data-module].radiusXXL {
  border-radius: var(--block-radius-XXL);
}

[data-module].widthModeHug {
  width: fit-content;
}
[data-module].widthModeFill, [data-module].widthModeFix {
  width: auto;
}

[data-module].heightModeHug {
  height: fit-content;
}
[data-module].heightModeFill, [data-module].heightModeFix {
  height: auto;
}

[data-module].borderTrue {
  border: 1px solid var(--content-border);
}

[data-module].flowRow,
[data-module].flowColumn {
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

[data-module].gapXS {
  gap: var(--block-gap-XS);
}
[data-module].gapSM {
  gap: var(--block-gap-SM);
}
[data-module].gapMD {
  gap: var(--block-gap-MD);
}
[data-module].gapLG {
  gap: var(--block-gap-LG);
}
[data-module].gapXL {
  gap: var(--block-gap-XL);
}
[data-module].gapXXL {
  gap: var(--block-gap-XXL);
}

[data-module].flowRow {
  flex-direction: row;
}
[data-module].flowColumn {
  flex-direction: column;
}

[data-module].wrapTrue {
  flex-wrap: wrap;
}
[data-module].wrapFalse {
  flex-wrap: nowrap;
}

[data-module].alignStart {
  align-items: flex-start;
}
[data-module].alignCenter {
  align-items: center;
}
[data-module].alignEnd {
  align-items: flex-end;
}
[data-module].alignStretch {
  align-items: stretch;
}

[data-module].justifyStart {
  justify-content: flex-start;
}
[data-module].justifyCenter {
  justify-content: center;
}
[data-module].justifyEnd {
  justify-content: flex-end;
}
[data-module].justifyBetween {
  justify-content: space-between;
}

[data-module].dividersTrue.flowRow > * + * {
  border-left: 1px solid var(--content-border);
}
[data-module].dividersTrue.flowColumn > * + * {
  border-top: 1px solid var(--content-border);
}

[data-module].scrollTrue {
  overflow: auto;
  overscroll-behavior: contain;
}

[data-module].flowColumn > [data-module].heightModeFill,
[data-module].flowRow > [data-module].widthModeFill {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

[data-module].flowColumn > [data-module].widthModeFill,
[data-module].flowRow > [data-module].heightModeFill {
  align-self: stretch;
}

[data-module=compositor] {
  height: 100svh;
  font-family: var(--font);
}

[data-module=compositor].fontManrope {
  --font: 'Manrope', sans-serif;
}
[data-module=compositor].fontUbuntu {
  --font: 'Ubuntu', sans-serif;
}
[data-module=compositor].fontJost {
  --font: 'Jost', sans-serif;
}

[data-module=block][data-click] {
  cursor: pointer;
}

[data-module=inline] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  color: hsl(var(--color)/var(--contrast));
}

button[data-module=inline] {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
}

button[data-module=inline],
a[data-module=inline] {
  cursor: pointer;
}

button[data-module=inline]:disabled {
  cursor: not-allowed;
  opacity: 0.32;
}

a[data-module=inline] {
  text-decoration: none;
}

[data-module=inline].paddingXS {
  padding: 4px;
}
[data-module=inline].paddingSM {
  padding: 8px;
}
[data-module=inline].paddingMD {
  padding: 12px;
}
[data-module=inline].paddingLG {
  padding: 16px;
}
[data-module=inline].paddingXL {
  padding: 24px;
}
[data-module=inline].paddingXXL {
  padding: 40px;
}

[data-module=inline].gapXS {
  gap: 4px;
}
[data-module=inline].gapSM {
  gap: 8px;
}
[data-module=inline].gapMD {
  gap: 12px;
}
[data-module=inline].gapLG {
  gap: 16px;
}
[data-module=inline].gapXL {
  gap: 24px;
}
[data-module=inline].gapXXL {
  gap: 40px;
}

[data-module=text] {
  color: hsl(var(--color)/var(--contrast));
}

[data-module=text].paddingXS {
  padding: 4px;
}
[data-module=text].paddingSM {
  padding: 8px;
}
[data-module=text].paddingMD {
  padding: 12px;
}
[data-module=text].paddingLG {
  padding: 16px;
}
[data-module=text].paddingXL {
  padding: 24px;
}
[data-module=text].paddingXXL {
  padding: 40px;
}

[data-module=text].boldTrue {
  font-weight: 500;
}

[data-module=text].highlightTrue {
  background: hsl(var(--color)/var(--background));
  border: 1px solid hsl(var(--color)/var(--border));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

[data-module=icon] {
  flex: none;
  color: hsl(var(--color)/var(--contrast));
}

[data-module=icon].paddingXS {
  padding: 4px;
}
[data-module=icon].paddingSM {
  padding: 8px;
}
[data-module=icon].paddingMD {
  padding: 12px;
}
[data-module=icon].paddingLG {
  padding: 16px;
}
[data-module=icon].paddingXL {
  padding: 24px;
}
[data-module=icon].paddingXXL {
  padding: 40px;
}

.iconAsset {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
}

[data-module=icon].contentImage {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

[data-module=icon].highlightTrue {
  background: hsl(var(--color)/var(--background));
  border: 1px solid hsl(var(--color)/var(--border));
}

[data-module=field] {
  width: 100%;
  min-width: 0;
  outline: none;
  color: var(--content-primary);
}
[data-module=field]::placeholder {
  color: var(--content-disabled);
}
[data-module=field]:focus {
  border-color: var(--accent-primary);
}
[data-module=field][aria-invalid=true] {
  border-color: hsl(var(--Error)/var(--primary));
}

[data-module=code] {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.codeInput {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--content-border);
  border-radius: 10px;
  outline: none;
  background: hsl(var(--view));
  color: var(--content-primary);
  font: inherit;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  caret-color: var(--accent-primary);
  transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.codeInput:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-border);
}

[data-module=code][data-state=success] .codeInput {
  border-color: hsl(var(--Success)/var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--Success)/var(--border));
}

[data-module=code][data-state=error] .codeInput {
  border-color: hsl(var(--Error)/var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--Error)/var(--border));
}

[data-module=code][aria-busy=true] .codeInput {
  cursor: wait;
  opacity: 0.56;
}