.ake-button, .ake-link, .button {
  display: block;
  padding: 8px 16px;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  border-style: solid;
}

.ake-link { text-decoration: none; }
.ake-button--xs, .ake-link--xs, .button.xs { font-size: 12px; padding: 0 8px; }
.ake-button--s, .ake-link--s, .button.s { font-size: 14px; padding: 4px 16px; }
.ake-button--m, .ake-link--m { font-size: 16px; padding: 8px 16px; }
.ake-button--l, .ake-link--l, .button.l { font-size: 18px; padding: 12px 24px; }
.ake-button--xl, .ake-link--xl, .button.xl { font-size: 24px; padding: 24px 36px; font-weight: 600; }

.ake-button.xs.icon, .ake-link.xs.icon, .button.xs.icon { background-size: 16px; }
.ake-button.s.icon, .ake-link.s.icon, .button.s.icon { background-size: 20px; }
.ake-button.icon, .ake-link.icon, .button.icon { background-size: 24px; background-position: 16px 10px; padding-left: 48px; background-repeat: no-repeat; }
.ake-button.icon.left, .ake-link.icon.left, .button.icon.left { background-position: left 16px center; text-align: left; }
.ake-button.icon.right, .ake-link.icon.right, .button.icon.right { background-position: right 16px center; text-align: left; padding-left: 16px; }
.ake-button.icon.l, .ake-link.icon.l, .button.icon.l { background-position: 16px center; }

.ake-button--tertiary, .ake-link--tertiary, .ake-button.transparent, .ake-link.transparent, .ake-button.tertiary, .ake-link.tertiary, .button.transparent, .button.tertiary { background-color: transparent; color: var(--color-action-tertiary-text); }
.ake-button--outline, .ake-link--outline, .ake-button--invert, .ake-link--invert, .ake-button.border, .ake-link.border, .button.border, .button.outline { background-color: var(--color-action-outline-background); border: 1px solid var(--color-action-outline-border); color: var(--color-action-outline-text); }
.ake-button.dotted, .ake-link.dotted, .button.dotted { border: 1px dotted var(--color-text-primary); }
.ake-button.survey, .ake-link.survey, .button.survey { border: 1px dotted var(--color-border-strong); background-color: var(--color-background-card); }
.ake-button--secondary, .ake-link--secondary, .ake-button.complement-1, .ake-link.complement-1, .button.complement-1, .button.secondary { background-color: var(--color-action-secondary-background); border-color: var(--color-action-secondary-border); color: var(--color-action-secondary-text); }
.ake-button.complement-2, .ake-link.complement-2, .button.complement-2 { background-color: var(--color-background-card-interactive); color: var(--color-text-primary); }
.ake-button--primary, .ake-link--primary, .ake-button.primary, .ake-link.primary, .button.primary { background-color: var(--color-action-primary-background); border-color: var(--color-action-primary-border); color: var(--color-action-primary-text); }
.ake-button--link, .ake-link--link, .ake-button.link, .ake-link.link, .button.link { background-color: transparent; color: var(--color-text-link); }
.ake-button--danger, .ake-link--danger, .ake-button.danger, .ake-link.danger, .button.danger { background-color: var(--color-feedback-error-background); border-color: var(--color-feedback-error-border); color: var(--color-feedback-error-text); }
.ake-button:disabled, .ake-button[aria-disabled="true"], .button:disabled, .button[aria-disabled="true"] { background-color: var(--color-action-disabled-background); border-color: var(--color-action-disabled-border); color: var(--color-action-disabled-text); cursor: not-allowed; }
.ake-button:focus-visible, .ake-link:focus-visible, .button:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 3px; }

.ake-button--secondary:hover, .button.secondary:hover { background-color: var(--color-action-secondary-hover); }
.ake-button--outline:hover, .ake-link--outline:hover, .ake-button--invert:hover, .ake-link--invert:hover, .button.outline:hover { background-color: var(--color-action-outline-hover); }
.ake-button--tertiary:hover, .ake-button--link:hover, .ake-link--tertiary:hover, .ake-link--link:hover, .button.transparent:hover, .button.tertiary:hover, .button.link:hover { background-color: var(--color-action-tertiary-hover); }
.ake-button--primary:hover, .ake-link--primary:hover, .button.primary:hover { background-color: var(--color-action-primary-hover); }
.ake-button--primary:active, .ake-link--primary:active, .button.primary:active { background-color: var(--color-action-primary-pressed); }
.ake-button--secondary:active, .button.secondary:active { background-color: var(--color-action-secondary-pressed); }
.ake-button--outline:active, .ake-link--outline:active, .ake-button--invert:active, .ake-link--invert:active, .button.outline:active { background-color: var(--color-action-outline-pressed); }
.ake-button--tertiary:active, .ake-button--link:active, .ake-link--tertiary:active, .ake-link--link:active, .button.tertiary:active, .button.link:active { background-color: var(--color-action-tertiary-pressed); }
.ake-button--danger:hover, .ake-link--danger:hover, .button.danger:hover { background-color: var(--color-action-danger-hover); }
.ake-button--danger:active, .ake-link--danger:active, .button.danger:active { background-color: var(--color-action-danger-pressed); }

.ake-icon-button { align-items: center; border: 1px solid transparent; border-radius: 999px; display: inline-flex; height: 3rem; justify-content: center; width: 3rem; }
.ake-icon-button--s { height: 2.5rem; width: 2.5rem; }
.ake-icon-button--l { height: 3.5rem; width: 3.5rem; }
.ake-icon-button--primary { background: var(--color-action-primary-background); border-color: var(--color-action-primary-border); color: var(--color-action-primary-text); }
.ake-icon-button--secondary { background: var(--color-action-secondary-background); border-color: var(--color-action-secondary-border); color: var(--color-action-secondary-text); }
.ake-icon-button--outline { background: var(--color-action-outline-background); border-color: var(--color-action-outline-border); color: var(--color-action-outline-text); }
.ake-icon-button--transparent { background: transparent; color: var(--color-action-tertiary-text); }
.ake-icon-button:disabled { background: var(--color-action-disabled-background); border-color: var(--color-action-disabled-border); color: var(--color-action-disabled-text); cursor: not-allowed; }
.ake-icon-button:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 3px; }

.ake-field { display: grid; gap: .375rem; }
.ake-field__label { color: var(--color-text-primary); font-weight: 600; }
.ake-field__control { min-width: 0; }
.ake-field__description { color: var(--color-text-secondary); font-size: .875rem; line-height: 1.25rem; margin: 0; }
.ake-field__error { color: var(--color-feedback-error-text); font-size: .875rem; line-height: 1.25rem; margin: 0; }

.ake-segmented-control { border: 0; margin: 0; min-width: 0; padding: 0; }
.ake-segmented-control__legend { color: var(--color-text-primary); margin-bottom: .375rem; }
.ake-segmented-control__options { align-items: stretch; background: var(--color-background-card); border-radius: 999px; display: flex; gap: 4px; padding: 4px; }
.ake-segmented-control__option { align-items: center; border-radius: 999px; color: var(--color-text-primary); cursor: pointer; display: flex; flex: 1 1 0; justify-content: center; position: relative; }
.ake-segmented-control__option input { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.ake-segmented-control__option span { align-items: center; border: 1px solid transparent; border-radius: inherit; display: flex; justify-content: center; min-height: 3rem; padding: 0 1rem; text-align: center; width: 100%; }
.ake-segmented-control--s .ake-segmented-control__option span { font-size: .875rem; min-height: 2.5rem; padding-inline: .75rem; }
.ake-segmented-control--l .ake-segmented-control__option span { font-size: 1.125rem; min-height: 3.5rem; padding-inline: 1.25rem; }
.ake-segmented-control__option input:checked + span { background: var(--color-background-page); border-color: var(--color-border-default); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.ake-segmented-control__option:hover span { background: var(--color-action-secondary-hover); }
.ake-segmented-control__option input:checked:hover + span { background: var(--color-background-page); }
.ake-segmented-control__option input:active + span { opacity: .75; }
.ake-segmented-control__option input:focus-visible + span { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }
.ake-segmented-control__option input:disabled + span { cursor: not-allowed; opacity: .55; }

:root {
  --ake-dot-size-s: 8px;
  --ake-dot-size-m: 10px;
  --ake-dot-size-l: 12px;
  --ake-dot-hit-area-s: 24px;
  --ake-dot-hit-area-m: 32px;
  --ake-dot-hit-area-l: 40px;
}

.ake-dot { align-items: center; background: transparent; border: 0; box-sizing: border-box; display: inline-flex; flex: 0 0 auto; height: var(--ake-dot-size); justify-content: center; padding: 0; vertical-align: middle; width: var(--ake-dot-size); }
.ake-dot__indicator { background: var(--ake-dot-background); border-radius: 50%; display: block; flex: 0 0 auto; height: var(--ake-dot-size); width: var(--ake-dot-size); }
.ake-dot--s { --ake-dot-size: var(--ake-dot-size-s); }
.ake-dot--m { --ake-dot-size: var(--ake-dot-size-m); }
.ake-dot--l { --ake-dot-size: var(--ake-dot-size-l); }
.ake-dot--hit-area { height: var(--ake-dot-hit-area); width: var(--ake-dot-hit-area); }
.ake-dot--hit-area.ake-dot--s { --ake-dot-hit-area: var(--ake-dot-hit-area-s); }
.ake-dot--hit-area.ake-dot--m { --ake-dot-hit-area: var(--ake-dot-hit-area-m); }
.ake-dot--hit-area.ake-dot--l { --ake-dot-hit-area: var(--ake-dot-hit-area-l); }
.ake-dot--default { --ake-dot-background: var(--color-action-secondary-background); }
.ake-dot--primary { --ake-dot-background: var(--color-action-primary-background); }
.ake-dot--success { --ake-dot-background: var(--color-feedback-success-text); }
.ake-dot--warning { --ake-dot-background: var(--color-feedback-warning-text); }
.ake-dot--critical { --ake-dot-background: var(--color-feedback-error-text); }
.ake-dot--progress { --ake-dot-background: var(--color-feedback-info-text); }
button.ake-dot { cursor: pointer; }
button.ake-dot:hover { opacity: .8; }
button.ake-dot:active { opacity: .65; }
button.ake-dot:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; }

.ake-avatar { align-items: center; background: var(--color-background-card); border-radius: 999px; color: var(--color-text-on-avatar); display: inline-flex; font-size: 1rem; height: 3rem; justify-content: center; line-height: 1; object-fit: cover; overflow: hidden; width: 3rem; }
.ake-avatar--s { font-size: .875rem; height: 2.5rem; width: 2.5rem; }
.ake-avatar--l { font-size: 1.25rem; height: 3.5rem; width: 3.5rem; }

.ake-catalog { color: var(--color-text-primary); margin: 0 auto; max-width: 52rem; padding: 2rem 1.5rem; }
.ake-catalog section { margin-top: 2rem; }
.ake-catalog h1, .ake-catalog h2, .ake-catalog p { margin-bottom: .75rem; }
.ake-catalog__list { list-style: none; margin: 0; padding: 0; }
.ake-catalog__list li + li { border-top: 1px solid var(--color-border-default); }
.ake-catalog__entry { color: inherit; display: grid; gap: .25rem; padding: 1rem; text-decoration: none; }
.ake-catalog__entry:hover, .ake-catalog__entry:focus-visible { background: var(--color-background-card); }
.ake-catalog__entry span, .ake-catalog__source { color: var(--color-text-secondary); }
.ake-catalog__preview { align-items: center; border-block: 1px solid var(--color-border-default); display: flex; flex-wrap: wrap; gap: 1rem; min-height: 5rem; padding: 1rem 0; }
.ake-catalog__attributes > div { border-top: 1px solid var(--color-border-default); padding: .75rem 0; }
.ake-catalog__attributes dt { font-weight: 700; }
.ake-catalog__attributes dd { margin: .25rem 0 0; }