:root {
  --l-0: .12;
  --l-1: .16;
  --l-2: .22;
  --l-3: .32;
  --l-4: .45;
  --l-5: .6;
  --l-6: .72;
  --l-7: .84;
  --l-8: .96;
  --c-0: .015;
  --c-1: .02;
  --c-2: .025;
  --c-3: .032;
  --c-4: .04;
  --c-5: .05;
  --c-6: .055;
  --c-7: .07;
  --c-8: .09;
  --c-9: .11;
  --c-10: .13;
  --h-surface: 230;
  --h-primary: 230;
  --h-success: 140;
  --h-danger: 15;
  --h-warning: 60;
  --surface-0: oklch(var(--l-0) var(--c-0) var(--h-surface));
  --surface-1: oklch(var(--l-1) var(--c-1) var(--h-surface));
  --surface-2: oklch(var(--l-2) var(--c-2) var(--h-surface));
  --surface-3: oklch(var(--l-3) var(--c-3) var(--h-surface));
  --surface-4: oklch(var(--l-4) var(--c-4) var(--h-surface));
  --surface-5: oklch(var(--l-5) var(--c-5) var(--h-surface));
  --surface-6: oklch(var(--l-6) var(--c-4) var(--h-surface));
  --surface-7: oklch(var(--l-7) var(--c-3) var(--h-surface));
  --surface-8: oklch(var(--l-8) var(--c-1) var(--h-surface));
  --primary-0: oklch(var(--l-0) var(--c-6) var(--h-primary));
  --primary-1: oklch(var(--l-1) var(--c-6) var(--h-primary));
  --primary-2: oklch(var(--l-2) var(--c-7) var(--h-primary));
  --primary-3: oklch(var(--l-3) var(--c-7) var(--h-primary));
  --primary-4: oklch(var(--l-4) var(--c-8) var(--h-primary));
  --primary-5: oklch(var(--l-5) var(--c-7) var(--h-primary));
  --primary-6: oklch(var(--l-6) var(--c-6) var(--h-primary));
  --primary-7: oklch(var(--l-7) var(--c-6) var(--h-primary));
  --primary-8: oklch(var(--l-8) var(--c-2) var(--h-primary));
  --success-0: oklch(var(--l-0) var(--c-6) var(--h-success));
  --success-1: oklch(var(--l-1) var(--c-7) var(--h-success));
  --success-2: oklch(var(--l-2) var(--c-7) var(--h-success));
  --success-3: oklch(var(--l-3) var(--c-8) var(--h-success));
  --success-4: oklch(var(--l-4) var(--c-9) var(--h-success));
  --success-5: oklch(var(--l-5) var(--c-7) var(--h-success));
  --success-6: oklch(var(--l-6) var(--c-7) var(--h-success));
  --success-7: oklch(var(--l-7) var(--c-6) var(--h-success));
  --success-8: oklch(var(--l-8) var(--c-6) var(--h-success));
  --danger-0: oklch(var(--l-0) var(--c-8) var(--h-danger));
  --danger-1: oklch(var(--l-1) var(--c-9) var(--h-danger));
  --danger-2: oklch(var(--l-2) var(--c-9) var(--h-danger));
  --danger-3: oklch(var(--l-3) var(--c-10) var(--h-danger));
  --danger-4: oklch(var(--l-4) var(--c-10) var(--h-danger));
  --danger-5: oklch(var(--l-5) var(--c-9) var(--h-danger));
  --danger-6: oklch(var(--l-6) var(--c-7) var(--h-danger));
  --danger-7: oklch(var(--l-7) var(--c-7) var(--h-danger));
  --danger-8: oklch(var(--l-8) var(--c-6) var(--h-danger));
  --warning-0: oklch(var(--l-0) var(--c-7) var(--h-warning));
  --warning-1: oklch(var(--l-1) var(--c-7) var(--h-warning));
  --warning-2: oklch(var(--l-2) var(--c-8) var(--h-warning));
  --warning-3: oklch(var(--l-3) var(--c-9) var(--h-warning));
  --warning-4: oklch(var(--l-4) var(--c-10) var(--h-warning));
  --warning-5: oklch(var(--l-5) var(--c-8) var(--h-warning));
  --warning-6: oklch(var(--l-6) var(--c-7) var(--h-warning));
  --warning-7: oklch(var(--l-7) var(--c-6) var(--h-warning));
  --warning-8: oklch(var(--l-8) var(--c-6) var(--h-warning));
  --black: oklch(0% 0 0);
  --white: oklch(100% 0 0);
  --spacer-1: 8px;
  --spacer-025: calc(var(--spacer-1) * .25);
  --spacer-05: calc(var(--spacer-1) * .5);
  --spacer-2: calc(var(--spacer-1) * 2);
  --spacer-3: calc(var(--spacer-1) * 3);
  --spacer-4: calc(var(--spacer-1) * 4);
  --spacer-5: calc(var(--spacer-1) * 5);
  --spacer-6: calc(var(--spacer-1) * 6);
  --spacer-7: calc(var(--spacer-1) * 7);
  --spacer-8: calc(var(--spacer-1) * 8);
  --font-xxs: .61rem;
  --font-xs: .74rem;
  --font-s: .8rem;
  --font-d: .9rem;
  --font-l: 1.05rem;
  --font-xl: 1.3rem;
  --font-xxl: 3rem;
  --icon-xs: calc(var(--spacer-1) * 1.75);
  --icon-s: calc(var(--spacer-1) * 2);
  --icon-m: calc(var(--spacer-1) * 2.5);
  --icon-d: var(--spacer-3);
  --icon-l: var(--spacer-4);
  --icon-xl: calc(var(--spacer-1) * 4.5);
  --border-radius-xs: var(--spacer-05);
  --border-radius-s: var(--spacer-05);
  --border-radius-d: var(--spacer-1);
  --border-radius-l: calc(var(--spacer-1) * 1.5);
  --border-radius-xl: var(--spacer-2);
  --shadow-soft: 0 2px var(--spacer-2) oklch(var(--l-1) var(--c-2) var(--h-surface) / .15);
  --shadow-d: 0 4px var(--spacer-1) oklch(var(--l-0) var(--c-2) var(--h-surface) / .25);
  --shadow-hard: 0 8px var(--spacer-3) oklch(var(--l-0) var(--c-2) var(--h-surface) / .35);
  --panel-width: 450px;
  --panel-context-width: 600px;
  --panel-collapsed-width: calc(var(--spacer-6)  + var(--spacer-05));
  --breakpoint-sm: 500px;
  --breakpoint-md: 750px;
  --breakpoint-lg: 1400px;
  --breakpoint-xl: 1550px;
  --breakpoint-xxl: 1920px;
  --input-height: 32px;
  --input-bg: var(--surface-2);
  --input-border: var(--surface-3);
  --input-text: var(--surface-7);
  --input-placeholder: var(--surface-5);
  --input-label: var(--surface-7);
  --input-margin: var(--spacer-3);
  --input-disabled-bg: var(--surface-3);
  --input-disabled-text: var(--surface-5);
  --input-disabled-border: var(--surface-4);
  --validation-default: 1px solid var(--surface-4);
  --validation-valid: 1px solid var(--success-3);
  --validation-invalid: 1px solid var(--danger-3);
  --focus-outline: 1px solid var(--primary-4);
  --focus-outline-invalid: var(--danger-2);
  --table-header-bg: var(--primary-8);
  --table-header-text: var(--primary-2);
  --table-header-height: var(--spacer-6);
  --info-0: var(--primary-0);
  --info-1: var(--primary-1);
  --info-2: var(--primary-2);
  --info-3: var(--primary-3);
  --info-4: var(--primary-4);
  --info-5: var(--primary-5);
  --info-6: var(--primary-6);
  --info-7: var(--primary-7);
  --info-8: var(--primary-8);
}

:root.light {
  --h-surface: 240;
  --c-0: .01;
  --c-1: .015;
  --c-2: .02;
  --l-0: .98;
  --l-1: .96;
  --l-2: .92;
  --l-3: .75;
  --l-4: .55;
  --l-5: .45;
  --l-6: .32;
  --l-7: .2;
  --l-8: .18;
  --input-bg: var(--surface-1);
  --input-text: var(--surface-8);
  --input-border: var(--surface-3);
  --input-placeholder: var(--surface-5);
  --input-label: var(--surface-8);
  --input-disabled-bg: var(--surface-2);
  --input-disabled-text: var(--surface-5);
  --input-disabled-border: var(--surface-3);
  --shadow-soft: 0 2px var(--spacer-2) oklch(var(--l-7) var(--c-2) var(--h-surface) / .15);
  --shadow-d: 0 4px var(--spacer-1) oklch(var(--l-8) var(--c-2) var(--h-surface) / .25);
  --shadow-hard: 0 8px var(--spacer-3) oklch(var(--l-8) var(--c-2) var(--h-surface) / .35);
  --table-header-bg: var(--primary-1);
  --table-header-text: var(--primary-7);
  --white: oklch(100% 0 0);
}

.mt-1 {
  margin-top: var(--spacer-1);
}

.mt-2 {
  margin-top: var(--spacer-2);
}

.mt-3 {
  margin-top: var(--spacer-3);
}

.mt-4 {
  margin-top: var(--spacer-4);
}

.mt-5 {
  margin-top: var(--spacer-5);
}

.mb-1 {
  margin-bottom: var(--spacer-1);
}

.mb-2 {
  margin-bottom: var(--spacer-2);
}

.mb-3 {
  margin-bottom: var(--spacer-3);
}

.mb-4 {
  margin-bottom: var(--spacer-4);
}

.mb-5 {
  margin-bottom: var(--spacer-5);
}

.ml-1 {
  margin-inline-start: var(--spacer-1);
}

.ml-2 {
  margin-inline-start: var(--spacer-2);
}

.ml-3 {
  margin-inline-start: var(--spacer-3);
}

.ml-4 {
  margin-inline-start: var(--spacer-4);
}

.ml-5 {
  margin-inline-start: var(--spacer-5);
}

.mr-1 {
  margin-inline-end: var(--spacer-1);
}

.mr-2 {
  margin-inline-end: var(--spacer-2);
}

.mr-3 {
  margin-inline-end: var(--spacer-3);
}

.mr-4 {
  margin-inline-end: var(--spacer-4);
}

.mr-5 {
  margin-inline-end: var(--spacer-5);
}

.tippy-box[data-animation="fade"][data-state="hidden"] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  background-color: var(--info-6);
  color: var(--info-2);
  white-space: normal;
  border-radius: 4px;
  outline: 0;
  font-size: 14px;
  line-height: 1.4;
  transition-property: transform, visibility, opacity;
  position: relative;
}

.tippy-box[data-placement^="top"] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^="top"] > .tippy-arrow:before {
  border-top-color: initial;
  transform-origin: top;
  border-width: 8px 8px 0;
  bottom: -7px;
  left: 0;
}

.tippy-box[data-placement^="bottom"] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
  border-bottom-color: initial;
  transform-origin: bottom;
  border-width: 0 8px 8px;
  top: -7px;
  left: 0;
}

.tippy-box[data-placement^="left"] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^="left"] > .tippy-arrow:before {
  border-left-color: initial;
  transform-origin: 0;
  border-width: 8px 0 8px 8px;
  right: -7px;
}

.tippy-box[data-placement^="right"] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^="right"] > .tippy-arrow:before {
  border-right-color: initial;
  transform-origin: 100%;
  border-width: 8px 8px 8px 0;
  left: -7px;
}

.tippy-box[data-inertia][data-state="visible"] {
  transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
}

.tippy-arrow {
  color: var(--info-6);
  width: 16px;
  height: 16px;
}

.tippy-arrow:before {
  content: "";
  border-style: solid;
  border-color: #0000;
  position: absolute;
}

.tippy-content {
  z-index: 1;
  padding: 5px 9px;
  position: relative;
}

.panel {
  background: oklch(from var(--surface-1) l c h / .8);
  border-right: 1px solid var(--surface-2);
  box-shadow: 0 0 var(--spacer-2) var(--spacer-1) oklch(from var(--surface-0) l c h / .4);
  opacity: 0;
  flex-direction: column;
  animation: .2s ease-in forwards fade-in;
  display: flex;
}

.panel--left {
  border-right: 1px solid var(--surface-2);
}

.panel--right {
  border-left: 1px solid var(--surface-2);
  border-right: none;
}

.panel--top {
  border-bottom: 1px solid var(--surface-2);
  border-right: none;
}

.panel--bottom {
  border-right: none;
  border-top: 1px solid var(--surface-2);
}

.panel__section {
  background: var(--surface-1);
  flex: 1;
  width: 100%;
}

.panel__header {
  background: var(--surface-1);
  align-items: center;
  gap: var(--spacer-1);
  padding: var(--spacer-05) var(--spacer-1);
  justify-content: flex-start;
  display: flex;
}

.panel__title {
  color: var(--surface-8);
  letter-spacing: .01em;
  font-size: 1.125rem;
  font-weight: 500;
}

.panel__nav a {
  color: var(--surface-6);
  align-items: center;
  gap: var(--spacer-1);
  padding: var(--spacer-1);
  justify-content: flex-start;
  width: 100%;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.panel__nav a:hover {
  background: var(--surface-2);
}

.panel__nav a.active {
  background: var(--surface-3);
  color: var(--surface-8);
}

.panel__actions {
  gap: var(--spacer-1);
  padding: var(--spacer-1);
  width: 100%;
  display: flex;
}

.panel__footer {
  color: var(--surface-6);
  padding: var(--spacer-1);
  width: 100%;
}

.panel--collapsed {
  max-width: 0;
  overflow: hidden;
}

.card {
  background: oklch(from var(--surface-2) l c h / .8);
  border: 1px solid var(--surface-2);
  border-radius: var(--border-radius-l);
  box-shadow: 0 0 var(--spacer-2) var(--spacer-1) oklch(from var(--surface-0) l c h / .3);
  padding: var(--spacer-4);
}

.card--solid {
  background: var(--surface-2);
}

.card--transparent {
  background: oklch(from var(--surface-2) l c h / .6);
}

.card__header {
  align-items: center;
  gap: var(--spacer-2);
  padding: var(--spacer-2) 0;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.card__title {
  color: var(--surface-8);
  font-size: var(--font-xl);
  font-weight: 500;
}

.card__content {
  color: var(--surface-7);
}

.card__footer {
  margin-top: var(--spacer-4);
}

.container {
  background-color: var(--surface-1);
  gap: var(--spacer-1);
  padding: var(--spacer-1);
  flex-direction: column;
  display: flex;
}

.container__section {
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  padding: var(--spacer-1);
}

.list-container {
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  flex-direction: column;
  display: flex;
}

.list-container__item {
  color: var(--surface-5);
  cursor: pointer;
  padding: var(--spacer-05) var(--spacer-1);
  transition: all .2s;
}

.list-container__item:hover {
  background: var(--surface-2);
  color: var(--surface-7);
}

.list-container__item--active {
  background: var(--surface-3);
  color: var(--surface-8);
}

.form {
  gap: var(--spacer-3);
  flex-direction: column;
  display: flex;
}

.form__field {
  margin-bottom: var(--spacer-3);
}

.form__label {
  color: var(--surface-5);
  font-size: var(--font-s);
  margin-bottom: var(--spacer-1);
  display: block;
}

.form__input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-s);
  color: var(--input-text);
  font-size: var(--font-d);
  height: var(--input-height);
  padding: 0 var(--spacer-2);
  width: 100%;
  transition: all .2s;
}

.form__input:focus {
  border-color: var(--primary-4);
  outline: none;
}

.form__input::placeholder {
  color: var(--input-placeholder);
}

.form__input:disabled {
  background: var(--input-disabled-bg);
  border-color: var(--input-disabled-border);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

.form__textarea {
  min-height: calc(var(--input-height) * 3);
  padding: var(--spacer-1) var(--spacer-2);
  resize: vertical;
}

.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-position: right var(--spacer-1) center;
  cursor: pointer;
  padding-right: var(--spacer-4);
  background-repeat: no-repeat;
}

.form__input-group {
  gap: var(--spacer-1);
  display: flex;
}

.form__input-group .form__input {
  flex: 1;
}

.form__field--with-button {
  position: relative;
}

.form__field--with-button button {
  background: var(--surface-2);
  border-radius: var(--border-radius-xs);
  height: calc(var(--input-height)  - var(--spacer-2));
  right: var(--spacer-1);
  width: var(--spacer-4);
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.form__help {
  color: var(--surface-5);
  font-size: var(--font-xs);
  margin-top: var(--spacer-05);
}

.form__field--error .form__input {
  border-color: var(--danger-4);
}

.form__error {
  color: var(--danger-6);
  font-size: var(--font-xs);
  margin-top: var(--spacer-05);
}

.form__field--success .form__input {
  border-color: var(--success-4);
}

.form__fieldset {
  border: 1px solid var(--surface-3);
  border-radius: var(--border-radius-s);
  margin-bottom: var(--spacer-3);
  padding: var(--spacer-2);
}

.form__legend {
  color: var(--surface-6);
  font-size: var(--font-l);
  padding: 0 var(--spacer-1);
  font-weight: 500;
}

.btn {
  border-radius: var(--border-radius-s);
  cursor: pointer;
  font-size: var(--font-d);
  align-items: center;
  gap: var(--spacer-1);
  height: var(--input-height);
  padding: 0 var(--spacer-2);
  user-select: none;
  border: none;
  justify-content: center;
  font-weight: 400;
  transition: all .2s;
  display: inline-flex;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.btn--primary {
  background: var(--primary-5);
  color: var(--primary-8);
}

.btn--primary:hover:not(:disabled) {
  background: var(--primary-6);
}

.btn--primary:active:not(:disabled) {
  background: var(--primary-4);
}

.btn--secondary {
  background: var(--surface-2);
  color: var(--surface-7);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--surface-3);
}

.btn--secondary:active:not(:disabled) {
  background: var(--surface-1);
}

.btn--success {
  background: var(--success-5);
  color: var(--success-8);
}

.btn--success:hover:not(:disabled) {
  background: var(--success-6);
}

.btn--danger {
  background: var(--danger-5);
  color: var(--danger-8);
}

.btn--danger:hover:not(:disabled) {
  background: var(--danger-6);
}

.btn--warning {
  background: var(--warning-5);
  color: var(--warning-8);
}

.btn--warning:hover:not(:disabled) {
  background: var(--warning-6);
}

.btn--ghost {
  border: 1px solid var(--surface-4);
  color: var(--surface-6);
  background: none;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: var(--surface-5);
}

.btn--outline {
  background: none;
  border: 1px solid;
}

.btn--outline:hover:not(:disabled) {
  background: oklch(from currentColor l c h / .1);
}

.btn--icon {
  aspect-ratio: 1;
  padding: var(--spacer-1);
  width: var(--icon-xl);
  border-radius: 50%;
}

.btn--icon-sm {
  padding: var(--spacer-05);
  width: var(--icon-d);
}

.btn--sm {
  font-size: var(--font-s);
  height: calc(var(--input-height) * .75);
  padding: 0 var(--spacer-1);
}

.btn--lg {
  font-size: var(--font-l);
  height: calc(var(--input-height) * 1.5);
  padding: 0 var(--spacer-4);
}

.btn--block {
  width: 100%;
}

.btn-group {
  gap: var(--spacer-1);
  display: flex;
}

.btn-group .btn {
  flex: 1;
}

.icon-btn {
  background: var(--surface-3);
  border: 1px solid var(--surface-4);
  cursor: pointer;
  height: var(--icon-xl);
  width: var(--icon-xl);
  border-radius: 50%;
  padding: 6px;
  transition: all .3s;
}

.icon-btn:hover {
  background: var(--surface-4);
}

.toolbar-btn {
  background: var(--surface-1);
  color: var(--surface-6);
  cursor: pointer;
  align-items: center;
  gap: var(--spacer-05);
  height: var(--spacer-5);
  padding: 0 var(--spacer-2);
  border: none;
  justify-content: center;
  transition: background .2s;
  display: flex;
}

.toolbar-btn:hover {
  background: var(--surface-2);
}

.toolbar-btn:active {
  background: var(--surface-3);
}

html, body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: var(--font-d);
  height: 100vh;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: .2s ease-in forwards fade-in;
}

* {
  box-sizing: border-box;
}

.styleguide-page {
  max-width: 1800px;
  padding: var(--spacer-6);
  margin: 0 auto;
  overflow-y: scroll;

  &.c-components {
    gap: var(--spacer-6);
    grid-template-columns: 1fr;
    display: grid;

    @media (width >= 1200px) {
      grid-template-columns: repeat(2, 1fr);
    }

    & > h1, & > p {
      grid-column: 1 / -1;
    }
  }
}

/*# sourceMappingURL=app.7r1boyq8wfhk227xf368h.css.map */