@layer components {
  .ui-check {
    align-items: center;
    gap: var(--ui-space-xs);
    color: var(--ui-text-strong);
    font-size: var(--ui-text-small);
    cursor: pointer;
    display: inline-flex;
  }

  .ui-check > input:not(.ui-switch) {
    appearance: none;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-well);
    width: 1.125rem;
    height: 1.125rem;
    box-shadow: var(--ui-elevation-sink);
    cursor: pointer;
    transition: background-color var(--ui-duration-quick), box-shadow var(--ui-duration-quick);
    flex: none;
    place-items: center;
    margin: 0;
    display: grid;
  }

  .ui-check > input:not(.ui-switch):not(:checked) {
    box-shadow: var(--ui-elevation-sink), inset 0 0 0 1px var(--ui-line-divider);
  }

  .ui-check > input:not(.ui-switch):after {
    content: "";
    opacity: 0;
    background: var(--ui-text-inverse);
    width: 10px;
    height: 10px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .ui-check > input:not(.ui-switch):checked {
    background: var(--ui-surface-ink);
    box-shadow: inset 0 1px light-dark(oklch(100% 0 none / .16), oklch(100% 0 none)), 0 0 0 1px light-dark(oklch(14% .003 265), oklch(0% 0 none / .5));
  }

  .ui-check > input:not(.ui-switch):checked:after {
    opacity: 1;
  }

  .ui-check > input[type="radio"] {
    border-radius: 50%;
  }

  .ui-check > input[type="radio"]:after {
    border-radius: 50%;
    width: 6px;
    height: 6px;
    mask: none;
  }

  .ui-check>input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}

  .ui-switch {
    appearance: none;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-well);
    width: 2.25rem;
    height: 1.375rem;
    box-shadow: var(--ui-elevation-sink);
    cursor: pointer;
    transition: background-color var(--ui-duration-base) var(--ui-ease);
    flex: none;
    margin: 0;
    position: relative;
  }

  .ui-switch:before {
    content: "";
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 0 1px var(--ui-line-contour), 0 1px 1px var(--ui-shade-1), 0 2px 3px -1px var(--ui-shade-2);
    transition: translate var(--ui-duration-base) var(--ui-ease);
    background: linear-gradient(oklch(100% 0 none), oklch(96.5% .0011 265));
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
  }

  .ui-switch:checked {
    background: var(--ui-surface-ink);
    box-shadow: inset 0 1px 2px oklch(0% 0 none / .3);
  }

  .ui-switch:checked:before {
    background: light-dark(linear-gradient(180deg, oklch(100% 0 none), oklch(96.5% .0011 265)), linear-gradient(180deg, oklch(26% .0024 265), oklch(20% .002 265)));
    translate: .875rem;
  }

  .ui-switch:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265)}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}}