@layer normalize, ds;

@layer view-transitions {
  @property --circle-wipe-progress {
    inherits: false;
    initial-value: 0vmax;
    syntax: '<length>';
  }
  @keyframes --circle-wipe {
    to {
      --circle-wipe-progress: 150vmax;
    }
  }
  /* biome-ignore lint/correctness/noUnknownTypeSelector: new feature */
  ::view-transition-old(root) {
    animation: none;
  }
  /* biome-ignore lint/correctness/noUnknownTypeSelector: new feature */
  &::view-transition-new(root) {
    mask-image: radial-gradient(circle var(--circle-wipe-progress) at var(--_theme-x, 50%) var(--_theme-y, 50%), black 70%, transparent 100%);
    animation: 0.6s ease-in both --circle-wipe;
  }
}

:root {
  --color-beta: #d6d4ff;
  --grid-max-width: 1400px;
  --grid-padding: clamp(1rem, calc(0.27rem + 3.64vw), 3rem);
  --grid-gap: var(--ds-size-8);
  --page-spacing-top: var(--ds-size-14);
  --page-spacing-bottom: var(--ds-size-14);
  --media-max-width: 800px;
}

body {
  font-family: 'Inter', sans-serif;
  font-feature-settings: 'cv05' 1; /* Enable lowercase l with tail */
  margin: 0;
  padding: 0;
}

/*make each section front page have tinted background */
[data-color-scheme='light'] {
  main:has([data-is-main='true']) {
    background-color: var(--ds-color-neutral-background-tinted);
  }
}

#main {
  min-height: 80svh;
}

@layer normalize {
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }

  main {
    display: block;
  }

  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline dotted; /* 2 */
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp {
    font-family: monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  img {
    border-style: none;
  }

  [hidden] {
    display: none;
  }
}

@layer rich-text {
  .u-rich-text {
    & > *:first-child {
      margin-top: 0;
    }

    & > *:last-child {
      margin-bottom: 0;
    }

    & p {
      margin-bottom: var(--ds-size-4);

      & > strong {
        margin: 0 !important;
      }
    }

    /* reset non-direct child targets in stories */
    [data-live] p {
      margin-bottom: initial;
    }

    & > h1,
    & > h2,
    & > h3,
    & > h4 {
      position: relative;
      padding-left: 26px;
      margin-left: -26px;
    }

    & > h2,
    & > h3,
    & > h4 {
      margin-top: var(--ds-size-15);
      margin-bottom: var(--ds-size-5);
    }

    /* Anchor link styling for <h1> */
    & > h1 a {
      height: 24px;
      width: 24px;
      margin-top: -2px;
      left: -4px;
    }

    /* Anchor links appear on heading hover */
    & > h1:hover a,
    & > h2:hover a,
    & > h3:hover a,
    & > h4:hover a {
      opacity: 1;
    }

    & > ul,
    & > ol {
      max-width: 100%;
      padding-left: var(--ds-size-5);
      box-sizing: border-box;
      margin-bottom: 24px;
    }

    & > ul > li,
    & > ol > li {
      line-height: 1.9em;
      word-break: break-word; /* Add this to prevent text from overflowing */
    }

    & > ul > li > ol,
    & > ol > li > ul {
      margin-top: var(--ds-size-1);
    }

    & > p > a:hover,
    & > ul > li a:hover,
    & > ol > li a:hover {
      text-decoration-thickness: 2px;
    }

    /* A <p> tag that comes directly after <h1> will be treated as an ingress */
    & > h1 + p {
      font: var(--ds-body-long-md-font-size);
      margin-top: 0;
      margin-bottom: var(--ds-size-8);
    }

    & > iframe {
      box-shadow: var(--ds-shadow-md);
      margin: var(--ds-size-5);
      border-radius: var(--ds-border-radius-md);
    }

    & > table {
      width: 100%;
      margin: var(--ds-size-7) 0;
      border-collapse: collapse;
    }

    & > img {
      width: 100%;
      margin: var(--ds-size-2) 0;
      border-radius: var(--ds-border-radius-md);
      box-shadow: var(--ds-shadow-md);
    }

    & td > code,
    & > p > code,
    & li > code,
    & h2 > code {
      padding: 0.2em 0.5em;
      margin: 1px;
      font-size: 0.9em;
      white-space: break-spaces;
      background-color: var(--ds-color-neutral-surface-tinted);
      border-radius: var(--ds-border-radius-md);
    }

    & > div + p {
      margin-top: var(--ds-size-5);
    }
  }
}
@layer global-components {
  .component-table {
    --dsc-table-border-radius: var(--ds-border-radius-lg);
    border-collapse: separate;
    word-break: break-all;
  }
}
@layer overrides {
  .ds-skip-link:focus {
    position: relative;
    z-index: 1;
  }
}
