@layer design-system.base {
  @scope (.markdown-body) {
    :scope {
      display: grid;
      place-items: normal center;
      padding-block: var(--sys-measurement-space-400);
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: var(--sys-measurement-space-200);
      container-type: inline-size;
      padding: var(--sys-measurement-space-200);
      inline-size: min(100%, 1200px);
      font: var(--sys-typescale-body-large);
      overflow-wrap: break-word;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding-block-start: var(--sys-measurement-space-100);
      text-wrap: pretty;
    }

    p,
    li {
      max-inline-size: 760px;
    }

    p:has(img) {
      max-inline-size: 100%;
    }

    img {
      border: 1px solid var(--sys-color-surface-variant);
      border-radius: var(--comp-visual-corner-shape);
      max-block-size: 500px;
    }

    h1 {
      font: var(--sys-typescale-emphasized-headline-large);
    }

    h2 {
      font: var(--sys-typescale-emphasized-headline-small);
    }

    h1,
    h2 {
      align-self: stretch;
      border-block-end: 1px solid var(--sys-color-outline-variant);
      padding-block-end: 0.3em;
    }

    h3 {
      font: var(--sys-typescale-emphasized-title-large);
    }

    h4 {
      font: var(--sys-typescale-title-medium);
    }

    h5 {
      font: var(--sys-typescale-title-small);
    }

    h6 {
      color: var(--sys-on-surface-variant);
      font: var(--sys-typescale-title-small);
      font-size: 0.85rem;
    }

    h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child,
    h5:first-child,
    h6:first-child {
      padding-block-start: var(--sys-measurement-space-0);
    }

    h1 tt,
    h1 code,
    h2 tt,
    h2 code,
    h3 tt,
    h3 code,
    h4 tt,
    h4 code,
    h5 tt,
    h5 code,
    h6 tt,
    h6 code {
      padding: 0 0.2em;
      font-size: inherit;
    }

    ul,
    ol {
      display: flex;
      flex-direction: column;
      gap: var(--sys-measurement-space-50);
      padding-inline-start: var(--sys-measurement-space-400);
    }

    li > *:not(:last-child) {
      margin-block-end: var(--sys-measurement-space-200);
    }

    blockquote {
      border-inline-start: 4px solid var(--sys-color-outline);
      padding-inline: var(--sys-measurement-space-200);
      color: var(--sys-on-surface-variant);
    }

    a {
      color: var(--sys-color-primary);
      text-decoration: underline;
      text-underline-offset: 0.2rem;

      :is(h1, h2, h3, h4, h5, h6) & {
        text-decoration: none;
      }
    }

    strong {
      font-weight: 600;
    }

    kbd {
      display: inline-block;
      vertical-align: middle;
      box-shadow: inset 0 -1px 0 var(--sys-color-outline);
      border: 1px solid var(--sys-color-outline);
      border-style: solid;
      border-radius: 6px;
      padding: var(--sys-measurement-space-50);
      font: 400 0.688rem / 0.908 var(--typeface-monospace);
      line-height: 10px;
    }

    table {
      border: 1px solid var(--sys-color-outline-variant);
      border-radius: 24px;
      border-spacing: 0;
      overflow: clip;
    }

    .table-wrapper {
      inline-size: 100%;
      overflow-inline: auto;
    }

    th,
    td {
      border-inline-end: 1px solid var(--sys-color-outline-variant);
      border-block-end: 1px solid var(--sys-color-outline-variant);
      padding: 18px 24px;
    }

    th {
      background: var(--sys-color-surface-container);
      font-weight: 500;
      text-align: center;
    }

    td {
      font-weight: 500;
    }

    th:last-child,
    td:last-child {
      border-inline-end: 0;
    }

    tbody tr:last-child td {
      border-block-end: 0;
    }
    tt,
    code:not(pre code) {
      border-radius: 6px;
      background-color: var(--sys-color-surface-container-high);
      padding: 0.2em 0.4em;
    }

    dt {
      font-style: italic;
      font-weight: 600;
    }

    dd {
      margin-block-end: var(--sys-measurement-space-200);
      padding-inline-start: var(--sys-measurement-space-200);
    }

    hr {
      margin-block: var(--sys-measurement-space-100);
      border-width: 0;
      background-color: var(--sys-color-outline);
      block-size: 0.25em;
    }

    li:has(> input[type="checkbox"]) {
      list-style-type: none;
    }

    ul:has(li > input[type="checkbox"]) {
      gap: var(--sys-measurement-space-50);
    }

    li > input[type="checkbox"] {
      vertical-align: middle;
      margin: 0 0.2em 0.25em -1.4em;
    }

    li:has(pre) {
      inline-size: calc(100cqi - var(--sys-measurement-space-400));
    }

    :not(.icon):is(img, svg, video) {
      max-inline-size: 100%;
      block-size: auto;
    }

    video {
      border: var(--border-size-1) solid var(--outline);
      border-radius: var(--radius-2);
      inline-size: 100%;
      object-fit: cover;
    }

    pre {
      border: 1px solid var(--sys-color-surface-variant);
      border-radius: var(--comp-visual-corner-shape);
      padding: var(--sys-measurement-space-200);
      overflow-inline: auto;
      scrollbar-color: var(--sys-color-outline) var(--sys-color-surface-container);
    }

    pre code {
      font: 400 0.85rem / 1.45 var(--typeface-monospace);
      white-space: pre;
    }

    figure {
      display: grid;
      gap: var(--sys-measurement-space-200);
      padding-block-end: var(--sys-measurement-space-300);
    }

    figcaption {
      container-type: inline-size;
      padding-inline: var(--sys-measurement-space-125);

      inline-size: 100%;
      font: var(--sys-typescale-body-large);
    }

    math {
      &:not(:is(li, p) &) {
        padding-block: var(--sys-measurement-space-300);
        font: 400 1.25rem / 1.5rem math;
      }
    }
  }
}

@layer design-system.base {
  /* PrismJS 1.30.0
https://prismjs.com/download#themes=prism-tomorrow&languages=markup+css+clike+javascript */
  code[class*="language-"],
  pre[class*="language-"] {
    background: 0 0;
    color: #ccc;
    font-size: 1em;
    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    line-height: 1.5;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
  }
  pre[class*="language-"] {
    margin: 0.5em 0;
    padding: 1em;
    overflow: auto;
  }
  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: #2d2d2d;
  }
  :not(pre) > code[class*="language-"] {
    border-radius: 0.3em;
    padding: 0.1em;
    white-space: normal;
  }
  .token.block-comment,
  .token.cdata,
  .token.comment,
  .token.doctype,
  .token.prolog {
    color: #999;
  }
  .token.punctuation {
    color: #ccc;
  }
  .token.attr-name,
  .token.deleted,
  .token.namespace,
  .token.tag {
    color: #e2777a;
  }
  .token.function-name {
    color: #6196cc;
  }
  .token.boolean,
  .token.function,
  .token.number {
    color: #f08d49;
  }
  .token.class-name,
  .token.constant,
  .token.property,
  .token.symbol {
    color: #f8c555;
  }
  .token.atrule,
  .token.builtin,
  .token.important,
  .token.keyword,
  .token.selector {
    color: #cc99cd;
  }
  .token.attr-value,
  .token.char,
  .token.regex,
  .token.string,
  .token.variable {
    color: #7ec699;
  }
  .token.entity,
  .token.operator,
  .token.url {
    color: #67cdcc;
  }
  .token.bold,
  .token.important {
    font-weight: 700;
  }
  .token.italic {
    font-style: italic;
  }
  .token.entity {
    cursor: help;
  }
  .token.inserted {
    color: green;
  }
}

@layer layout {
  html {
    scroll-behavior: auto;
    --typeface-monospace: "Google Sans Code", monospace;

    ::search-text {
      background: var(--sys-color-secondary-container);
      color: var(--sys-color-on-secondary-container);
    }

    ::search-text:current {
      background: var(--sys-color-tertiary-container);
      color: var(--sys-color-on-tertiary-container);
    }
  }

  /* docs */
  .shape-preview {
    display: grid;
    place-items: center;
    inline-size: 100%;

    &::before {
      clip-path: var(--shape-path);
      background-color: var(--sys-color-primary, currentColor);
      aspect-ratio: 1;
      inline-size: 48px;
      content: "";
    }
  }

  pre {
    border: none;
    border-radius: var(--sys-shape-corner-extra-large);
    background: var(--sys-color-surface-container-lowest);
    background: light-dark(oklch(19% 0 0), var(--sys-color-surface-container));
    padding: var(--sys-measurement-space-300);
    color-scheme: dark;
  }

  code {
    font-size: 14px;
    line-height: 21px;
    font-family: "Google Sans Code", monospace;
  }

  table code {
    white-space: nowrap;
  }

  .token-spec {
    display: block;
    margin-block-start: 4px;
    color: var(--sys-color-on-surface-variant);
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .heading-anchor {
    color: var(--sys-color-on-surface);
    --_hashtag-inset-inline: auto -0.8em;
    --_hashtag-visibility: hidden;
    position: relative;

    /* window-large-wider */
    @media (width >=1200px) {
      --_hashtag-inset-inline: -0.8em auto;
    }

    &:hover {
      text-decoration: underline;
      --_hashtag-visibility: visible;
    }

    &::before {
      position: absolute;
      visibility: var(--_hashtag-visibility);
      inset-inline: var(--_hashtag-inset-inline);
      content: "#";
      color: var(--sys-color-on-surface-variant);
      font-size: 0.9em;
    }
  }

  .color-swatch {
    display: inline-block;
  }

  .table-content-button-link {
    position: fixed;
    z-index: 999;
    inset-block-end: var(--sys-measurement-space-200);
    inset-inline-end: var(--sys-measurement-space-200);
  }

  details {
    &[open] {
      .icon {
        rotate: 90deg;
        transition: rotate var(--sys-motion-spring-fast-spatial-duration) var(--sys-motion-spring-fast-spatial);
      }
    }
  }

  .details-content {
    display: grid;
    gap: var(--sys-measurement-space-200);
    padding-block: var(--sys-measurement-space-200);

    ul {
      display: grid;
      gap: var(--sys-measurement-space-200);
    }
  }

  .button:is(summary) {
    display: list-item;
    align-content: center;
  }

  footer {
    padding-block-start: var(--sys-measurement-space-800);
  }

  .footer-note {
    font: var(--sys-typescale-body-medium);
  }
}