@layer features {
  #settings[open] {
    --icon-bg: var(--selected);
    --icon-color: var(--selected-text);
  }
  #settings summary {
    align-items: center;
    display: flex;
    font-weight: normal;
  }
  #settings summary::marker {
    content: none;
  }
  #settings summary::-webkit-details-marker {
    display: none;
  }
  #settings [data-icon] {
    background: var(--icon-bg);
    color: var(--icon-color);
  }
  #settings .summary-text {
    padding-inline: var(--shim);
  }
  #settings .details {
    display: grid;
    gap: var(--gap);
  }
  #settings fieldset {
    border: 0;
    margin: 0;
    padding: 0;
  }
  #color-scheme {
    --display-init: block;
  }
  [data-callout] {
    --callout-border: calc(var(--inset) * 0.25);
    --callout-inset: calc(var(--inset) - var(--callout-border));
    background-color: var(--shadow, hsla(0deg, 0%, 0%, 0.125));
    border-inline-start: var(--callout-border) solid var(--border);
    margin-inline: var(--outset, 0);
    padding: var(--gap) var(--inset) var(--half-shim);
    padding-inline-start: calc(var(--callout-inset));
  }
  [data-callout] > strong {
    font-size: var(--smaller);
    text-transform: uppercase;
  }
  [data-callout=warn] {
    border-color: var(--accent);
  }
  [click-select] {
    user-select: all;
  }
  [data-options] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--shim);
  }
  [data-options] button {
    flex: 1 1 20%;
  }
  [data-erase=off] mark {
    background: transparent !important;
    color: inherit !important;
  }
  [data-erase=on] {
    color: transparent;
  }
  [data-gallery] {
    display: grid;
    gap: var(--gap, 1em);
  }
  [data-gallery] img,
[data-gallery] video,
[data-gallery] audio,
[data-gallery] iframe,
[data-gallery] picture,
[data-gallery] svg {
    width: var(--media-width, 100%);
    height: var(--media-height, auto);
  }
  [data-gallery] :only-child,
[data-gallery] :last-child:nth-child(odd):not([style*="--span"] ~ *) {
    grid-column: 1/-1;
  }
  @media (min-width: 35em) {
    [data-gallery=multi] {
      grid-template-columns: [full-start] repeat(2, minmax(0, 1fr)) [full-end];
    }
    [data-gallery=multi] > * {
      grid-column: var(--span);
    }
  }
  code[style*="--swatch"]::before {
    aspect-ratio: 1;
    background: linear-gradient(var(--swatch), var(--swatch)), linear-gradient(45deg, black 50%, white 50%);
    border: thin solid;
    content: "";
    display: inline-block;
    inline-size: 1em;
    margin-inline-end: 0.2ch;
  }
}

/*# sourceMappingURL=features.css.map */