/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./src/assets/styles/technote.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
html {
  box-sizing: border-box;
}

/*
 * Inherit border-box sizing from html
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
*,
*:before,
*:after {
  box-sizing: inherit;
}

:root {
  /*
   * Reinforce that we're respecting the user's ability to set a default
   * font size. The rem unit now becomes relative to this.
   * Flexible Typesetting, Tim Brown, ch 2 and 4
   */
  font-size: 1.1rem;
}

:root {
  /*
   * Color design tokens.
   *
   * These are based on GitHub Primer.
   * https://primer.style/prism/local/a4751264-de23-430e-a2fc-669488065638/scale/c2a0938a-e1dc-4b20-a07b-e2778ae57f41
   */
  --tn-color-black: #1b1f24;
  --tn-color-white: #ffffff;
  --tn-color-neutral-000: #f6f8fa;
  --tn-color-neutral-100: #eaeef2;
  --tn-color-neutral-200: #d0d7de;
  --tn-color-neutral-300: #afb8c1;
  --tn-color-neutral-400: #8c959f;
  --tn-color-neutral-500: #6e7781;
  --tn-color-neutral-600: #57606a;
  --tn-color-neutral-700: #424a53;
  --tn-color-neutral-800: #32383f;
  --tn-color-neutral-900: #24292f;
  --tn-color-blue-000: #ddf4ff;
  --tn-color-blue-100: #b6e3ff;
  --tn-color-blue-200: #80ccff;
  --tn-color-blue-300: #54aeff;
  --tn-color-blue-400: #218bff;
  --tn-color-blue-500: #0969da;
  --tn-color-blue-600: #0550ae;
  --tn-color-blue-700: #033d8b;
  --tn-color-blue-800: #0a3069;
  --tn-color-blue-900: #002155;
  --tn-color-green-000: #dafbe1;
  --tn-color-green-100: #aceebb;
  --tn-color-green-200: #6fdd8b;
  --tn-color-green-300: #4ac26b;
  --tn-color-green-400: #2da44e;
  --tn-color-green-500: #1a7f37;
  --tn-color-green-600: #116329;
  --tn-color-green-700: #044f1e;
  --tn-color-green-800: #003d16;
  --tn-color-green-900: #002d11;
  --tn-color-yellow-000: #fff8c5;
  --tn-color-yellow-100: #fae17d;
  --tn-color-yellow-200: #eac54f;
  --tn-color-yellow-300: #d4a72c;
  --tn-color-yellow-400: #bf8700;
  --tn-color-yellow-500: #9a6700;
  --tn-color-yellow-600: #7d4e00;
  --tn-color-yellow-700: #633c01;
  --tn-color-yellow-800: #4d2d00;
  --tn-color-yellow-900: #3b2300;
  --tn-color-orange-000: #fff1e5;
  --tn-color-orange-100: #ffd8b5;
  --tn-color-orange-200: #ffb77c;
  --tn-color-orange-300: #fb8f44;
  --tn-color-orange-400: #e16f24;
  --tn-color-orange-500: #bc4c00;
  --tn-color-orange-600: #953800;
  --tn-color-orange-700: #762c00;
  --tn-color-orange-800: #5c2200;
  --tn-color-orange-900: #471700;
  --tn-color-red-000: #ffebe9;
  --tn-color-red-100: #ffcecb;
  --tn-color-red-200: #ffaba8;
  --tn-color-red-300: #ff8182;
  --tn-color-red-400: #fa4549;
  --tn-color-red-500: #cf222e;
  --tn-color-red-600: #a40e26;
  --tn-color-red-700: #82071e;
  --tn-color-red-800: #660018;
  --tn-color-red-900: #4c0014;
  --tn-color-purple-000: #fbefff;
  --tn-color-purple-100: #ecd8ff;
  --tn-color-purple-200: #d8b9ff;
  --tn-color-purple-300: #c297ff;
  --tn-color-purple-400: #a475f9;
  --tn-color-purple-500: #8250df;
  --tn-color-purple-600: #6639ba;
  --tn-color-purple-700: #512a97;
  --tn-color-purple-800: #3e1f79;
  --tn-color-purple-900: #2e1461;
  --tn-color-pink-000: #ffeff7;
  --tn-color-pink-100: #ffd3eb;
  --tn-color-pink-200: #ffadda;
  --tn-color-pink-300: #ff80c8;
  --tn-color-pink-400: #e85aad;
  --tn-color-pink-500: #bf3989;
  --tn-color-pink-600: #99286e;
  --tn-color-pink-700: #772057;
  --tn-color-pink-800: #611347;
  --tn-color-pink-900: #4d0336;
  --tn-color-coral-000: #fff0eb;
  --tn-color-coral-100: #ffd6cc;
  --tn-color-coral-200: #ffb4a1;
  --tn-color-coral-300: #fd8c73;
  --tn-color-coral-400: #ec6547;
  --tn-color-coral-500: #c4432b;
  --tn-color-coral-600: #9e2f1c;
  --tn-color-coral-700: #801f0f;
  --tn-color-coral-800: #691105;
  --tn-color-coral-900: #510901;
  --tn-color-primary: var(--tn-color-neutral-900);
  --tn-color-primary-000: var(--tn-color-neutral-000);
  --tn-color-primary-100: var(--tn-color-neutral-100);
  --tn-color-primary-200: var(--tn-color-neutral-200);
  --tn-color-primary-300: var(--tn-color-neutral-300);
  --tn-color-primary-400: var(--tn-color-neutral-400);
  --tn-color-primary-500: var(--tn-color-neutral-500);
  --tn-color-primary-600: var(--tn-color-neutral-600);
  --tn-color-primary-700: var(--tn-color-neutral-700);
  --tn-color-primary-800: var(--tn-color-neutral-800);
  --tn-color-primary-900: var(--tn-color-neutral-900);
}

:root {
  /*
   * Spacing values in em units
   */
  --tn-space-unit: 1em;
  --tn-space-xxxs: calc(0.25 * var(--tn-space-unit));
  --tn-space-xxs: calc(0.375 * var(--tn-space-unit));
  --tn-space-xs: calc(0.5 * var(--tn-space-unit));
  --tn-space-sm: calc(0.75 * var(--tn-space-unit));
  --tn-space-md: calc(1.25 * var(--tn-space-unit));
  --tn-space-lg: calc(2 * var(--tn-space-unit));
  --tn-space-xl: calc(3.25 * var(--tn-space-unit));
  --tn-space-xxl: calc(5.25 * var(--tn-space-unit));
  --tn-space-xxxl: calc(8.5 * var(--tn-space-unit));
  /*
    * Fixed spacing
    * These aren't affected by --space-unit or the root font size
    */
  --tn-space-unit-fixed: 1rem;
  --tn-space-xxxs-fixed: calc(0.25 * var(--tn-space-unit-fixed));
  --tn-space-xxs-fixed: calc(0.375 * var(--tn-space-unit-fixed));
  --tn-space-xs-fixed: calc(0.5 * var(--tn-space-unit-fixed));
  --tn-space-sm-fixed: calc(0.75 * var(--tn-space-unit-fixed));
  --tn-space-md-fixed: calc(1.25 * var(--tn-space-unit-fixed));
  --tn-space-lg-fixed: calc(2 * var(--tn-space-unit-fixed));
  --tn-space-xl-fixed: calc(3.25 * var(--tn-space-unit-fixed));
  --tn-space-xxl-fixed: calc(5.25 * var(--tn-space-unit-fixed));
  --tn-space-xxxl-fixed: calc(8.5 * var(--tn-space-unit-fixed));
}

:root {
  /*
   * Border radius
   */
  --tn-border-radius-0: 0px;
  --tn-border-radius-1: 4px;
  --tn-border-radius-2: 7px;
}

:root {
  /*
   * Typographic design tokens.
   */
  --tn-component-h1-size: 3.052rem;
  --tn-component-h2-size: 2.441rem;
  --tn-component-h3-size: 1.563rem;
  --tn-component-h4-size: 1.25rem;
  --tn-component-h5-size: 1rem;
  --tn-component-h6-size: 0.8rem;
  --tn-component-h1-weight: normal;
  --tn-component-h2-weight: normal;
  --tn-component-h3-weight: bold;
  --tn-component-h4-weight: bold;
  --tn-component-h5-weight: bold;
  --tn-component-h6-weight: bold;
  --tn-component-text-color: var(--tn-color-black);
  --tn-component-link-color: var(--tn-color-blue-500);
  --tn-component-text-background-color: var(--tn-color-white);
  --tn-component-text-font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
    sans-serif;
  --tn-component-text-line-height: 1.5;
}

html[data-theme=dark] {
  --tn-component-text-color: var(--tn-color-white);
  --tn-component-link-color: var(--tn-color-blue-300);
  --tn-component-text-background-color: var(--tn-color-black);
}

/* Properties for Sphinx components. */
:root {
  --tn-sphinx-code-block-border-color: var(--tn-color-primary);
  --tn-sphinx-code-block-border-thickness: 1px;
  --tn-sphinx-code-block-border-radius: var(--tn-border-radius-1);
  --tn-sphinx-code-block-caption-background-color: var(--tn-color-primary-000);
  --tn-sphinx-footnote-label-background-color: var(--tn-color-blue-000);
  --tn-sphinx-footnote-label-border-color: var(--tn-color-blue-100);
  --tn-sphinx-footnote-label-background-hover-color: var(--tn-color-blue-100);
  --tn-sphinx-footnote-label-border-hover-color: var(--tn-color-blue-200);
}

html[data-theme=dark] {
  --tn-sphinx-code-block-border-color: var(--tn-color-primary-700);
  --tn-sphinx-code-block-caption-background-color: var(--tn-color-primary-900);
  --tn-sphinx-footnote-label-background-color: var(--tn-color-blue-900);
  --tn-sphinx-footnote-label-border-color: var(--tn-color-blue-800);
  --tn-sphinx-footnote-label-background-hover-color: var(--tn-color-blue-800);
  --tn-sphinx-footnote-label-border-hover-color: var(--tn-color-blue-700);
}

/*
 * Styles that affect the overall layout. Since Technote is built on
 * sphinx-basic-ng as the base theme, these styles primarily work with
 * the base theme's sb- classes.
 */
.sb-container {
  margin-top: var(--tn-space-md-fixed);
  margin-bottom: var(--tn-space-xxl-fixed);
}

/* Style the prmary sidebar when it's a popover. */
#sb-sidebar-toggle--primary:checked ~ .sb-container .sb-sidebar-primary {
  background-color: white;
  box-shadow: 10px 5px 5px rgb(161, 161, 161);
  border-right: 1px solid black;
}

#sb-sidebar-toggle--secondary:checked ~ .sb-container .sb-sidebar-secondary {
  background-color: white;
  box-shadow: -5px 0 5px rgb(161, 161, 161);
  border-left: 1px solid black;
  padding-left: var(--tn-space-md-fixed);
}

#sb-sidebar-toggle--secondary:checked ~ .sb-container .technote-toc-header {
  margin-top: var(--tn-space-md-fixed);
}

.sb-sidebar-overlay {
  -webkit-backdrop-filter: blur(1.5px) opacity(0.7) brightness(150%);
          backdrop-filter: blur(1.5px) opacity(0.7) brightness(150%);
  background-color: rgba(0, 0, 0, 0);
}

.sb-header__inner {
  display: flex;
  justify-content: space-between;
}

.sb-header__inner label {
  margin: var(--tn-space-xs-fixed);
}

/* Highlight key containers for debugging. */
/*
 * Content container width.
 * Goal is to have a content width <= 80 characters. These override
 * breakpoint settings from sphinx-basic-ng's skeleton.css
 */
.sb-article-container,
.sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
  /* reset skeleton.css. Using 100vw means we get horizontal scrollbars. */
  width: auto;
}

@media (max-width: 42rem) {
  .sb-article-container,
.sb-footer-content__inner {
    width: 100vw;
  }
  body {
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}
@media (min-width: 42rem) {
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 38rem;
  }
  .sb-article,
.match-content-width {
    width: 38rem;
  }
}
@media (min-width: 46rem) {
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  .sb-article,
.match-content-width {
    width: 40rem;
  }
}
@media (min-width: 50rem) {
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  .sb-article,
.match-content-width {
    width: 40rem;
  }
  /* h1::after {
    content: ' 50';
  } */
}
@media (min-width: 59rem) {
  /* secondary sidebar appears, width is 17rem. */
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  .sb-article,
.match-content-width {
    width: 36rem;
  }
  /* h1::after {
    content: ' 59';
  } */
}
@media (min-width: 63rem) {
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  .sb-article,
.match-content-width {
    width: 36rem;
  }
  /* h1::after {
    content: ' 63';
  } */
}
@media (min-width: 67rem) {
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  .sb-article,
.match-content-width {
    width: 40rem;
  }
  /* h1::after {
    content: ' 67';
  } */
}
@media (min-width: 76rem) {
  /* The primary sidebar appears */
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  .sb-article,
.match-content-width {
    width: 32rem;
  }
  .sb-sidebar-primary {
    box-shadow: none;
    border-right: none;
  }
  /* h1::after {
    content: ' 76';
  } */
}
@media (min-width: 80rem) {
  .sb-article,
.match-content-width {
    width: 34rem;
  }
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  /* h1::after {
    content: ' 80';
  } */
}
@media (min-width: 84rem) {
  .sb-article,
.match-content-width {
    width: 40rem;
  }
  /* h1::after {
    content: ' 84';
  } */
}
@media (min-width: 88rem) {
  .sb-footer-content__inner,
.drop-secondary-sidebar-for-full-width-content .sb-article,
.drop-secondary-sidebar-for-full-width-content .match-content-width {
    width: 40rem;
  }
  .sb-page-width {
    width: 86rem;
  }
  /* h1::after {
    content: ' 88';
  } */
}
/*
 * Primary sidebar
 */
.sb-sidebar-primary {
  padding: var(--tn-space-md-fixed);
}

/*
 * Typography.
 */
body {
  font-family: var(--tn-component-text-font-family);
  line-height: var(--tn-component-text-line-height);
  color: var(--tn-component-text-color);
  background: var(--tn-component-text-background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* Put header vertically closer to its own section. */
  margin: 1.5em 0 0.8em;
  line-height: 1.2;
}

h1 {
  font-size: var(--tn-component-h1-size);
  font-weight: var(--tn-component-h1-weight);
  margin: 0 0 1em;
}

h2 {
  font-size: var(--tn-component-h2-size);
  font-weight: var(--tn-component-h2-weight);
}

h3 {
  font-size: var(--tn-component-h3-size);
  font-weight: var(--tn-component-h3-weight);
}

h4 {
  font-size: var(--tn-component-h4-size);
  font-weight: var(--tn-component-h4-weight);
}

h5 {
  font-size: var(--tn-component-h5-size);
  font-weight: var(--tn-component-h5-weight);
}

h6 {
  font-size: var(--tn-component-h6-size);
  font-weight: var(--tn-component-h6-weight);
}

/* Handle Sphinx's built-in permalink icon. */
h1 .headerlink,
h2 .headerlink,
h3 .headerlink,
h4 .headerlink,
h5 .headerlink,
h6 .headerlink {
  visibility: hidden;
  text-decoration: none;
}

h1:hover .headerlink,
h2:hover .headerlink,
h3:hover .headerlink,
h4:hover .headerlink,
h5:hover .headerlink,
h6:hover .headerlink {
  visibility: visible;
}

a {
  color: var(--tn-component-link-color);
}

/* Styles Sphinx-generated content classes */
a.headerlink {
  opacity: 0;
  font-size: 0.9em;
  margin-left: var(--tn-space-xxs);
  text-decoration: none;
  transition: all 0.2s ease-out;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

h1:hover a.headlink,
h2:hover a.headerlink,
h3:hover a.headerlink,
h4:hover a.headerlink,
h5:hover a.headerlink,
h6:hover a.headerlink,
.code-block-caption:hover a.headerlink {
  opacity: 0.5;
}

a.headerlink:hover {
  opacity: 1;
}

pre {
  font-size: 0.85rem;
}

.highlight {
  margin: 0;
  margin-left: calc(-1 * var(--tn-space-xs-fixed));
  padding: var(--tn-space-xs-fixed);
  overflow-x: auto;
  border: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color);
  border-radius: var(--tn-sphinx-code-block-border-radius);
}

.literal-block-wrapper {
  margin-left: calc(-1 * var(--tn-space-xs-fixed));
  padding-left: var(--tn-space-xs-fixed);
  border: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color);
  border-radius: var(--tn-sphinx-code-block-border-radius);
}

.literal-block-wrapper .highlight {
  border: none;
}

.code-block-caption {
  background-color: var(--tn-sphinx-code-block-caption-background-color);
  border-bottom: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color);
  border-radius: var(--tn-sphinx-code-block-border-radius) var(--tn-sphinx-code-block-border-radius) 0 0;
  padding: var(--tn-space-xxxs-fixed) var(--tn-space-xs-fixed);
  margin-left: calc(-1 * var(--tn-space-xs-fixed));
}

.admonition {
  border: var(--tn-sphinx-code-block-border-thickness) solid var(--tn-sphinx-code-block-border-color);
  border-radius: var(--tn-sphinx-code-block-border-radius);
  padding: var(--tn-space-xs-fixed);
  margin-bottom: 1rem;
}

.admonition :last-child {
  margin-bottom: 0;
}

.admonition-title {
  font-weight: bold;
  margin: calc(-1 * var(--tn-space-xs-fixed));
  padding: var(--tn-space-xs-fixed);
  border-radius: var(--tn-sphinx-code-block-border-radius) var(--tn-sphinx-code-block-border-radius) 0 0;
  font-size: 0.9rem;
}

.admonition.attention .admonition-title,
.admonition.caution .admonition-title,
.admonition.warning .admonition-title,
.admonition.important .admonition-title {
  background-color: var(--tn-color-yellow-100);
}

.admonition.attention,
.admonition.caution,
.admonition.warning,
.admonition.important {
  border-color: var(--tn-color-yellow-500);
}

.admonition.danger .admonition-title,
.admonition.error .admonition-title {
  background-color: var(--tn-color-red-100);
}

.admonition.danger,
.admonition.error {
  border-color: var(--tn-color-red-500);
}

.admonition.tip .admonition-title,
.admonition.note .admonition-title,
.admonition.hint .admonition-title {
  background-color: var(--tn-color-blue-100);
}

.admonition.tip,
.admonition.note,
.admonition.hint {
  border-color: var(--tn-color-blue-500);
}

.footnote-list .footnote {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.footnote-list .footnote .label {
  display: block;
  min-width: 1.5rem;
}

.footnote-list .footnote .label a,
.footnote-reference {
  background-color: var(--tn-sphinx-footnote-label-background-color);
  border: 1px solid var(--tn-sphinx-footnote-label-border-color);
  border-radius: 4px;
  padding: 2px 4px;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.footnote-list .footnote .label a:hover,
.footnote-reference:hover {
  background-color: var(--tn-sphinx-footnote-label-background-hover-color);
  border: 1px solid var(--tn-sphinx-footnote-label-border-hover-color);
}

.footnote .fn-bracket,
.footnote-reference .fn-bracket {
  display: none;
}

.citation p {
  display: inline;
}

.citation .label a {
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.citation .label a:hover {
  text-decoration: underline;
}

blockquote {
  border-left: 0.25rem solid var(--tn-color-primary);
  margin-left: 0;
  padding-left: 1rem;
}

blockquote .attribution {
  font-style: italic;
}

main li p {
  margin-top: 0;
  margin-bottom: 0;
}

.block-list p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 2rem;
}

dd p:first-of-type {
  margin-top: 0.2rem;
}

img {
  max-width: 100%;
}

figure {
  margin-left: 0;
  margin-right: 0;
}

figure img {
  max-width: 100%;
}

figcaption {
  width: 100%;
  background-color: var(--tn-sphinx-code-block-caption-background-color);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  margin: 0;
  border: none;
}

figcaption p {
  margin-top: 0;
  margin-bottom: 1em;
  padding: 0;
}

figcaption p:last-child {
  margin-bottom: 0;
}

.technote-table {
  max-width: 100%;
  overflow-x: auto;
}

table {
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto 0 0;
  white-space: nowrap;
  font-size: 0.9rem;
  font-variant-numeric: lining-nums tabular-nums;
  border-collapse: collapse;
}

th {
  font-weight: normal;
}

thead {
  border-bottom: 1px solid var(--tn-component-text-color);
}

td,
th {
  padding: 0.125em 0.5em 0.25em 0.5em;
  line-height: 1;
  text-align: inherit;
}

td {
  text-align: "." center;
}

table caption {
  caption-side: bottom;
}

.technote-article-header-id {
  font-size: var(--tn-component-h4-size);
  font-weight: bold;
}

/*
 * Icon Metadata Lists consist of a an icon paired with a metadata value.
 * The value can span multiple lines, but will always be indented beside
 * the icon.
 */
.technote-icon-metadata {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--tn-space-xxs-fixed);
}

.technote-icon-metadata__icon {
  width: 1em;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
}

.technote-icon-metadata__value {
  flex-grow: 1;
  margin: 0;
}

/*
 * Styles for the author list that appears below the title.
 */
.technote-status + .technote-inline-authors {
  margin-top: 2rem;
}

/* The container for the primary sidebar */
@media (min-width: 76rem) {
  .technote-sidebar-container {
    position: sticky;
    top: 1rem;
    overflow-y: auto;
    max-height: 100vh;
  }
}
:root {
  --tn-component-sidebar-header-color: var(--tn-color-neutral-600);
}

html[data-theme=dark] {
  --tn-component-sidebar-header-color: var(--tn-color-neutral-200);
}

.technote-sidebar-section {
  margin: 0 0 var(--tn-space-lg-fixed);
}

.technote-sidebar-section:first-of-type {
  margin-top: var(--tn-space-lg-fixed);
}

.technote-sidebar-section__heading {
  font-size: var(--tn-component-h6-size);
  font-weight: bold;
  color: var(--tn-component-sidebar-header-color);
  margin-bottom: 0.5rem;
}

.technote-sidebar-section__heading + * {
  margin-top: var(--tn-space-xs-fixed);
}

.technote-sidebar-author-list {
  margin-top: var(--tn-space-xs-fixed);
}

.technote-sidebar-metadata-list {
  margin-top: var(--tn-space-xs-fixed);
  margin-bottom: var(--tn-space-xs-fixed);
  list-style-type: none;
  padding: 0;
}

/*
 * Styles for the sidebar-logo component.
 */
.technote-sidebar-logo__picture {
  max-width: 12rem;
}

/* Styles for the document status aside */
.technote-status {
  border: 1px solid var(--tn-component-text-color);
  padding: 1rem;
  border-radius: var(--tn-border-radius-1);
}

.technote-status--deprecated {
  border-color: var(--tn-color-red-500);
}

.technote-status p:first-of-type {
  margin-top: 0;
}

.technote-status *:last-child {
  margin-bottom: 0;
}

.technote-svg-icon {
  width: 0.85em;
  height: 0.85em;
  display: inline;
  fill: currentColor;
}

a .technote-svg-icon {
  fill: var(--tn-component-text-color);
}

/*
 * Local TOC styling.
 */
:root {
  --tn-component-toc-header-color: var(--tn-color-neutral-600);
  --tn-component-toc-level-border-color: var(--tn-color-neutral-600);
}

html[data-theme=dark] {
  --tn-component-toc-header-color: var(--tn-color-neutral-200);
  --tn-component-toc-level-border-color: var(--tn-color-neutral-200);
}

.technote-toc {
  overflow-y: auto;
  max-height: 100vh;
}

@media (min-width: 59rem) {
  .technote-toc {
    position: sticky;
    top: 1rem;
    margin-top: 20vh;
    margin-left: 2rem;
  }
}
.technote-toc-header {
  margin: 0 0 1rem;
  font-size: var(--tn-component-h4-size);
  font-weight: bold;
  color: var(--tn-component-toc-header-color);
}

.technote-toc-container {
  line-height: 1.2;
  /* Spacing between items in the toc */
  --technote-toc-container-spacing: var(--tn-space-xs-fixed);
}

.technote-toc-container a {
  text-decoration: none;
}

.technote-toc-container a:hover {
  text-decoration: underline;
}

.technote-toc-container ul {
  list-style-type: none;
  padding-left: var(--tn-space-xs-fixed);
  margin-left: var(--tn-space-xxs-fixed);
  border-left: 2px solid var(--tn-component-toc-level-border-color);
  margin-top: var(--technote-toc-container-spacing);
}

/* Root-level sections aren't indented */
.technote-toc-container > ul {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  margin-top: 0;
}

.technote-toc-container li {
  margin-bottom: var(--technote-toc-container-spacing);
}

/*
 * Utilities for displaying different elements based on the current theme.
 */
html[data-theme=light] .technote-themed-dark {
  display: none;
}

html[data-theme=dark] .technote-themed-light {
  display: none;
}

.technote-icon-pair-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/*
 * comma-list makes a ul an inline list with grammatical comma separated
 * items.
 */
.technote-inline-comma-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.technote-inline-comma-list li {
  display: inline;
}

.technote-inline-comma-list li:after {
  content: ", ";
}

.technote-inline-comma-list li:last-child:after {
  content: "";
}

.technote-inline-comma-list li:nth-last-child(2):after {
  content: " and ";
}

.technote-inline-comma-list li:nth-last-child(3) ~ li:nth-last-child(2):after {
  content: ", and ";
}

/*
 * Hiding class, making content visible only to screen readers but not visually
 * "sr" meaning "screen-reader"
 * https://css-tricks.com/inclusively-hidden/
 */
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

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