/*reset*/
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,p,article,aside,figcaption,figure,footer,header,nav,section,mark,audio,video,main,menu{margin:0;padding:0}
article,aside,figcaption,figure,footer,header,nav,section,main{display:block}
fieldset,img{border:0}
address,caption,cite,em,strong{font-style:normal;font-weight:400}
ol,ul,menu{list-style:none}
caption{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
abbr{border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
body{-webkit-text-size-adjust:none}
select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif}
del{font-style:normal;text-decoration:none}
pre{font-family:monospace;line-height:100%}
template{display:none}
mark{background:none}
progress{-webkit-appearance:none;appearance:none;overflow:hidden;}

/* page */
html{font-family:system-ui,sans-serif;text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:16px;background:#fff;}
html,html:focus-within{scroll-behavior:smooth;}
#ft{display:none;}

/* common style */
.stuff{text-indent:100%;white-space:nowrap;overflow:hidden;}
.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.line-clampin{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, 2);-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;}
.overscrolling{-webkit-overflow-scrolling:touch;overflow:hidden;overflow-y:scroll;overscroll-behavior:contain;}
.overscrolling-x{-webkit-overflow-scrolling:touch;overflow:hidden;overflow-x:scroll;overscroll-behavior:contain;}
.absolute-center{position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;}
.flex-center{display:flex;justify-content:center;align-items:center;}
.force-radius{overflow:hidden;transform:translate3d(0, 0, 0);border-radius:var(--r, 8px);}
.pretty-paragraph{word-break:break-word;hyphens:auto;text-wrap:pretty;white-space:pre-wrap;}
.button-two-face {
  --button-size: 40;
  --button-size-with-unit: calc(var(--button-size) * 1px);
  
  --button-background-color: rgba(202 230 252);
  --button-icon-color: rgba(8 28 53);
  --button-box-shadow: none;
  --button-active-scale: .8;

  --button-icon-scale-basis: calc((var(--button-size) * .75) / 24);
  --before-icon: none;
  --before-scale: var(--button-icon-scale-basis);
  --after-icon: none;
  --after-scale: 0;

  flex-shrink: 0;
  font-size: 0;
  appearance: none;
  box-shadow: unset;
  border: unset;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
  margin: 0;
  padding: 0;
  outline: 0 none;

  position: relative;
  inline-size: var(--button-size-with-unit);
  aspect-ratio: 1/1;
  border-radius: var(--button-size-with-unit);
  background-color: var(--button-background-color);
  box-shadow: var(--button-box-shadow);

  &:active {
    scale: var(--button-active-scale);
  }

  &::before,
  &::after {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    content: '';
    inline-size: 24px;
    aspect-ratio: 1/1;
    background-color: var(--button-icon-color);
    margin-inline-start: -12px;
    margin-block-start: -12px;
    transition: scale 250ms ease;
    will-change: scale;
    pointer-events: none;
  }

  &::before {
    scale: var(--before-scale);
    clip-path: var(--before-icon);
  }

  &::after {
    scale: var(--after-scale);
    clip-path: var(--after-icon);
  }

  &[data-reverse] {
    --before-scale: 0;
    --after-scale: var(--button-icon-scale-basis);
  }
}
.fade-in-out {
  --min-block-size: var(--fade-in-out-min-block-size, 100px);
  --max-block-size: var(--fade-in-out-max-block-size, 500px);
  --gap: var(--fade-in-out-gap, 16px);

  --mask-vertical-size: var(--gap);
  --mask-vertical: linear-gradient(
    to bottom,
    transparent 0%,
    black calc(0% + var(--mask-vertical-size)),
    black calc(100% - var(--mask-vertical-size)),
    transparent 100%
  );

  /* scroll */
  --scrollbar-inline-size: 2px;
  --scrollbar-block-size: 2px;
  --scrollbar-background: transparent;
  --scrollbar-thumb: var(--fade-in-out-scrollbar-thumb-color, rgba(0 0 0/.2));

  inline-size: 100%;
  min-block-size: var(--min-block-size);
  max-block-size: var(--max-block-size);
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
  mask-image: var(--mask-vertical);
  -webkit-mask-image: var(--mask-vertical);
  padding-block: var(--gap);

  &::-webkit-scrollbar {
    inline-size: var(--scrollbar-inline-size);
    block-size: var(--scrollbar-block-size);
  }

  &::-webkit-scrollbar-track {
    background: var(--scrollbar-background);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar-block-size);
    background: var(--scrollbar-thumb);
  }
}

:root {
  /**
   * safe area variables for iX design
   */
  --safe-area-left: 0px;
  --safe-area-right: 0px;
  --safe-area-top: 0px;
  --safe-area-bottom: 0px;

  @supports (bottom: env(safe-area-inset-top)) {
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
  }
}

/*
 view transition
 - https://developer.chrome.com/docs/web-platform/view-transitions?hl=zh-tw
 - https://view-transitions.chrome.dev/stack-navigator/mpa-prerender/
 */
@supports (view-transition-name: none) {
  @view-transition {
    navigation: auto;
  }

  @keyframes view-transition-page-shrink {
    to {
      scale: .97;
      filter: brightness(0);
    }
  }

  @keyframes view-transition-page-slide-in {
    from {
      translate: 100vw 0;
    }
  }

  ::view-transition {
    background: rgba(0 0 0);
  }

  :root {
    view-transition-name: none;
  }

  body {
    view-transition-name: page;
  }

  ::view-transition-group(page) {
    animation-duration: .7s;
  }

  ::view-transition-old(page) {
    animation-name: view-transition-page-shrink;
    transform-origin: 100% 50%;
  }

  ::view-transition-new(page) {
    animation-name: view-transition-page-slide-in;
  }
}

body {
  --header-button-size: 40px;
  /*--header-padding-inline: max(var(--safe-area-left), .75em);*/
  --header-padding-inline: max(var(--safe-area-left), 12px);
  --header-padding-block-start: calc(var(--safe-area-top) + .75em);
  --header-padding-block-end: .75em;
  --header-block-size: calc(var(--header-button-size) + var(--header-padding-block-start) + var(--header-padding-block-end));
  
  --viewport-block-size: 100dvb;
  --main-block-size: calc(var(--viewport-block-size) - var(--header-block-size));

  --primary-font-family: Roboto, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;
  --headline-font-family: Google Sans, Noto Sans, Noto Sans JP, Noto Sans KR, Noto Naskh Arabic, Noto Sans Thai, Noto Sans Hebrew, Noto Sans Bengali, sans-serif;

  @media (display-mode: fullscreen) {
    --viewport-block-size: 100vb;
  }
}

.site_nav {
  --msc-sidebar-background: rgba(255 255 255);
}

.sidebar-nav {
  inline-size: min(26.25em, 70dvi);
  background-color: rgba(255 255 255);
  z-index: 2;

  .sidebar-nav__head {
    inline-size: 100%;
    block-size: var(--header-block-size);
    padding-inline: var(--header-padding-inline);
    padding-block: var(--header-padding-block-start) var(--header-padding-block-end);
    box-sizing: border-box;
    box-shadow:
      0 1px 2px 0 rgba(60 64 67/.3),
      0 2px 6px 2px rgba(60 64 67/.15);
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      --line-clamp: 1;

      flex-grow: 1;
      font-family: "Roboto Mono", monospace;
      font-size: 1.125em;
      color: rgba(60 64 67);
    }
  }

  .sidebar-nav__section {
    --text-color: rgba(78 82 86);

    padding-block: 2.25em;

    &:nth-child(n + 2 of.sidebar-nav__section) {
      border-block-start: 1px solid rgba(224 224 224);
    }

    .sidebar-nav__section__p {
      font-size: 1.125em;
      color: var(--text-color);
      line-height: 1.5;
      padding-inline: var(--header-padding-inline) 12px;
      box-sizing: border-box;
    }

    .sidebar-nav__section__ul {
      inline-size: 100%;
      display: block;

      li {
        inline-size: 100%;
      }

      .sidebar-nav__section__link {
        --text-color-normal: rgba(95, 99, 104);
        --text-color-active: rgba(32 33 36);
        --text-color: var(--text-color-normal);

        --background-color-normal: transparent;
        --background-color-active: rgba(0 0 0/.04);
        /*--background-color-active: rgba(198 198 198);*/
        --background-color: var(--background-color-normal);

        font-size: .875em;
        color: var(--text-color);
        line-height: 1.2857;
        background-color: var(--background-color);
        padding-inline: var(--header-padding-inline) 12px;
        padding-block: 1.7142em;
        box-sizing: border-box;
        display: block;
        text-decoration: unset;
        outline: 0 none;

        transition: background-color .25s ease, color .25s ease;
        will-change: background-color, color;

        &:focus-visible,
        &.sidebar-nav__section__link--active {
          --text-color: var(--text-color-active);
          --background-color: var(--background-color-active);
        }

        @media (hover: hover) {
          &:hover {
            --text-color: var(--text-color-active);
            --background-color: var(--background-color-active);
          }
        }
      }
    }
  }
}

#hd {
  --background-color: rgba(255 255 255);
  --h1-color: rgba(60 64 67);

  --button-size: var(--header-button-size);
  --icon-share: path('M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z');
  --icon-color: rgba(33 33 33);
  --button-background-color-normal: rgba(255 255 255);
  --button-background-color-active: rgba(198 198 198);
  --button-background-color: var(--button-background-color-normal);

  position: relative;
  inline-size: 100%;
  block-size: var(--header-block-size);
  padding-inline: var(--header-padding-inline);
  padding-block: var(--header-padding-block-start) var(--header-padding-block-end);
  box-sizing: border-box;
  box-shadow:
    0 1px 2px 0 rgba(60 64 67/.3),
    0 2px 6px 2px rgba(60 64 67/.15);
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5em;
  background-color: rgba(255 255 255);

  h1 {
    --line-clamp: 1;

    font-family: "Roboto Mono", monospace;
    flex-grow: 1;
    font-size: 1.25em;
    color: var(--h1-color);
    line-height: 1.5;
  }

  .button-menu {
    --arrow-size: 4px;

    flex-shrink: 0;
    font-size: 0;
    appearance: none;
    box-shadow: unset;
    border: unset;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
    margin: 0;
    padding: 0;
    outline: 0 none;

    position: relative;
    inline-size: var(--button-size);
    aspect-ratio: 1/1;
    background: url(../img/codelabs/icon.png) no-repeat 0% 0%/cover;
    margin-inline-end: var(--arrow-size);

    &:active {
      transition: unset;
      scale: .85;
    }

    &::after {
      position: absolute;
      inset-inline-end: calc(var(--arrow-size) * -1);
      content: '';
      inline-size: 0;
      block-size: 0;
      border: var(--arrow-size) solid transparent;
      border-block-start-color: rgba(42 53 74);
    }
  }

  .button-share {
    flex-shrink: 0;
    font-size: 0;
    appearance: none;
    box-shadow: unset;
    border: unset;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
    margin: 0;
    padding: 0;
    outline: 0 none;
    display: grid;
    place-content: center;

    inline-size: var(--button-size);
    aspect-ratio: 1/1;
    border-radius: var(--button-size);
    background-color: var(--button-background-color);
    scale: 0;
    transition:
      background-color .25s ease,
      scale .25s ease-in-out;
    will-change: background-color, scale;
    pointer-events: none;

    &[data-active] {
      scale: 1;
      pointer-events: auto;
    }

    &:focus-visible {
      --button-background-color: var(--button-background-color-active);
    }

    &:active {
      transition: unset;
      scale: .85;
    }

    @media (hover: hover) {
      &:hover {
        --button-background-color: var(--button-background-color-active);
      }
    }

    &::before {
      content: '';
      inline-size: 24px;
      aspect-ratio: 1/1;
      background-color: var(--icon-color);
      clip-path: var(--icon-share);
    }
  }
}

#bd {
  --nav-inline-size: 16em;

  inline-size: 100dvi;
  block-size: var(--main-block-size);

  @media screen and (width <= 767px) {
    --nav-inline-size: 0px;
  }

  > section {
    --gap: 1em;
    --current: attr(data-current type(<integer>), 1);

    inline-size: 100%;
    block-size: 100%;
    display: flex;
    background-color: rgba(248 249 250);

    &.section--landing {
      background-image: linear-gradient(to bottom right, rgba(255 255 255) , rgba(222 232 226));
      display: grid;
      place-content: center;

      .section__welcome {
        inline-size: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;

        p {
          font-family: var(--headline-font-family);
          font-size: 2.5em;
          font-weight: 700;
          color: rgba(37 48 71);
        }

        .section__welcome__button {
          --size: 60px;

          flex-shrink: 0;
          appearance: none;
          box-shadow: unset;
          border: unset;
          background: transparent;
          -webkit-user-select: none;
          user-select: none;
          pointer-events: auto;
          margin: 0;
          padding: 0;
          outline: 0 none;

          font-size: 1.25em;
          font-weight: 600;
          color: rgba(255 255 255);
          background-color: rgba(37 48 71);
          inline-size: fit-content;
          block-size: var(--size);
          line-height: var(--size);
          border-radius: var(--size);
          padding-inline: 2em;

          &:active {
            scale: .9;
          }
        }
      }
    }

    nav {
      --max-block-size: 100%;

      flex-shrink: 0;
      inline-size: var(--nav-inline-size);
      block-size: 100%;
      transition: inline-size .25s ease-in-out;
      will-change: inline-size;
      
      .nav__ol {
        --font-weight-normal: 400;
        --font-weight-active: 600;
        --font-weight: var(--font-weight-normal);
        --color-normal: rgba(95 99 104);
        --color-active: rgba(33 33 33);
        --color: var(--color-active);
        --box-shadow-normal: none;
        --box-shadow-active: 0 1px 2px 0 rgba(60 64 67/.3), 0 2px 6px 2px rgba(60 64 67/.15);
        --box-shadow: var(--box-shadow-normal);
        --sign-background-color-normal: rgba(129 134 138);
        --sign-background-color-active: rgba(56 113 224);
        --sign-background-color: var(--sign-background-color-active);
        --background-color-normal: rgba(255 255 255);
        --background-color-active: rgba(198 198 198);
        --background-color: var(--background-color-normal);

        display: flex;
        flex-direction: column;
        /*padding-inline: max(var(--safe-area-left), var(--gap)) var(--gap);*/
        padding-inline: max(var(--safe-area-left), var(--gap)) 4px;
        gap: var(--gap);
        counter-reset: order 0;

        .nav__ol__li {
          flex-shrink: 0;
          inline-size: 100%;
          block-size: 3.5em;

          &:has([data-active]) {
            --font-weight: var(--font-weight-active);
            --box-shadow: var(--box-shadow-active);

            & ~ .nav__ol__li {
              --color: var(--color-normal);
              --sign-background-color: var(--sign-background-color-normal);
            }
          }

          .nav__ol__li__a {
            inline-size: 100%;
            block-size: 100%;
            background-color: var(--background-color);
            outline: 0 none;
            padding: .1875em .625em;
            border: 1px solid rgba(218 220 224);
            border-radius: .3125em;
            display: flex;
            align-items: center;
            gap: .625em;
            box-sizing: border-box;
            text-decoration: none;
            box-shadow: var(--box-shadow);
            transition: background-color 250ms ease;
            will-change: background-color;

            &:focus-visible {
              --background-color: var(--background-color-active);
            }

            &:active {
              scale: .95;
            }

            @media (hover: hover) {
              &:hover {
                --background-color: var(--background-color-active);
              }
            }

            &::before {
              flex-shrink: 0;
              font-size: .875em;
              inline-size: 26px;
              aspect-ratio: 1/1;
              content: counter(order);
              color: rgba(255 255 255);
              border-radius: 26px;
              background-color: var(--sign-background-color);
              display: grid;
              place-content: center;
              counter-increment: order;
            }

            span {
              font-size: .875em;
              color: var(--color);
              font-weight: var(--font-weight);
            }
          }
        }
      }
    }

    .slides {
      --mask-edge-size: var(--gap);
      --mask:
        linear-gradient(
          to bottom,
          transparent 0%,
          black calc(0% + var(--mask-edge-size)),
          black calc(100% - var(--mask-edge-size)),
          transparent 100%
        ) 0% 0% / 100% 100% no-repeat intersect,
        linear-gradient(
          to right,
          transparent 0%,
          black calc(0% + var(--mask-edge-size)),
          black calc(100% - var(--mask-edge-size)),
          transparent 100%
        ) 0% 0% / 100% 100% no-repeat intersect
      ;
      --content-margin-inline: 16px;
      --content-inline-size: calc(100% - var(--content-margin-inline) * 2);
      --content-max-inline-size: 800px;

      /* action buttons */
      --action-button-inline-gap: 2em;
      --action-button-back-translate: 1em 0;
      --action-button-next-translate: -1em 0;

      /* 800px + 16px * 2 */
      @container (width >= 816px) {
        .slides__queue {
          --content-inline-size: var(--content-max-inline-size);
        }
      }
      
      /* 800px + 16px * 2 * 2 + 80px * 2*/
      @container (width >= 1024px) {
        .slides__actions {
          --action-button-back-translate: calc((100% + var(--inline-gap)) * -1) 0;
          --action-button-next-translate: calc(100% + var(--inline-gap)) 0;
        }
      }

      flex-grow: 1;
      position: relative;
      inline-size: 100%;
      block-size: 100%;
      mask: var(--mask);
      overflow: hidden;
      container-type: inline-size;

      @media screen and (width <= 767px) {
        --mask:
          linear-gradient(
            to bottom,
            transparent 0%,
            black calc(0% + var(--mask-edge-size)),
            black calc(100% - var(--mask-edge-size)),
            transparent 100%
          ) 0% 0% / 100% 100% no-repeat;

        --content-inline-size: 100%;
        --action-button-back-translate: calc(var(--safe-area-left) + 1em) 0;
        --action-button-next-translate: calc((var(--safe-area-right) + 1em) * -1) 0;
      }

      .slides__actions {
        --inline-gap: 2em;
        --block-gap: calc(var(--safe-area-bottom) + 2em);

        position: absolute;
        inset-inline: 0;
        inset-block-end: var(--block-gap);
        inline-size: var(--content-inline-size);
        max-inline-size: var(--content-max-inline-size);

        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        pointer-events: none;

        .slides__actions__button {
          --background-color: rgb(255 255 255);
          --color: rgba(26 115 232);
          --back-translate: var(--action-button-back-translate);
          --next-translate: var(--action-button-next-translate);

          font-size: .875em;
          color: var(--color);
          line-height: 2.5714;
          padding: 0;
          margin: 0;
          appearance: none;
          border: 0 none;
          box-shadow:
            0 2px 2px 0 rgba(0 0 0/.14),
            0 1px 5px 0 rgba(0 0 0/.12),
            0 3px 1px -2px rgba(0 0 0/.2);
          border-radius: .2857em;
          padding-inline: 1.7142em;
          background-color: var(--background-color);
          text-transform: capitalize;
          translate: var(--back-translate);
          transition:
            opacity .2s ease-in-out,
            scale .2s ease-in-out,
            translate .2s ease-in-out;
          will-change: opacity scale translate;
          pointer-events: auto;
          outline: 0 none;

          &[disabled] {
            opacity: 0;
            scale: 0;
            pointer-events: none;
          }

          &:active {
            transition: unset;
            scale: .95;
          }

          &.slides__actions__button--next {
            --background-color: rgb(26 115 232);
            --color: rgba(255 255 255);

            translate: var(--next-translate);
          }
        }
      }

      .slides__queue {
        --distance: calc((var(--current) - 1) * -1 * 100%);

        inline-size: 100%;
        block-size: 100%;
        display: flex;
        flex-wrap: nowrap;
        transition: translate .45s ease-in-out;
        will-change: translate;
        translate: var(--distance) 0;

        .slides__queue__unit {
          flex-shrink: 0;
          inline-size: 100%;
          block-size: 100%;
          box-sizing: border-box;
          overflow: hidden;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;

          .slides__queue__unit__content {
            inline-size: var(--content-inline-size);
            max-inline-size: var(--content-max-inline-size);
            margin: 0 auto;
            padding-block: var(--gap) max(var(--safe-area-bottom), var(--gap));

            > * + * {
              margin-block-start: 2em;
            }

            > :nth-last-child(1) {
              padding-block-end: calc(var(--safe-area-bottom) + 2em);
            }
          }
        }
      }
    }
  }
}

.content--authors {
  --text-color: rgba(78 82 86);
  --padding-inline: 1.5em;
  --padding-block: 1.5em;
  --border-radius: .25em;

  color: var(--text-color);
  font-family: var(--primary-font-family);
  padding-block-start: 2em;

  @media screen and (width <= 767px) {
    --border-radius: 0px;
  }

  .content--authors__title {
    font-size: 2em;
    line-height: 1.4;
    text-align: center;
  }

  .content--authors__about {
    background-color: rgba(255 255 255);
    border-radius: var(--border-radius);
    padding-inline: var(--padding-inline);
    padding-block: var(--padding-block);
    box-sizing: border-box;
    border: 1px solid rgba(218 220 224);
    margin-block-start: 2em;
    display: flex;
    flex-direction: column;
    gap: 1.875em;

    .content--authors__about__title {
      font-family: var(--headline-font-family);
      font-size: 1.75em;
      line-height: 1;
    }

    .content--authors__about__update {
      line-height: 1.5;
      display: flex;
      align-items: flex-start;
      gap: 8px;

      &::before {
        content: '';
        inline-size: 24px;
        aspect-ratio: 1/1;
        background-color: var(--text-color);
        display: block;
        clip-path: path('M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z');
      }
    }

    .content--authors__about__authors {
      line-height: 1.5;
      display: flex;
      align-items: flex-start;
      gap: 8px;

      &::before {
        content: '';
        inline-size: 24px;
        aspect-ratio: 1/1;
        background-color: var(--text-color);
        display: block;
        clip-path: path('M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z');
      }
    }
  }
}

.content-module {
  --text-color: rgba(78 82 86);
  --padding-inline: 1.5em;
  --padding-block: 1.5em;
  --border-radius: .25em;

  font-family: var(--primary-font-family);
  color: var(--text-color);
  background-color: rgba(255 255 255);
  border-radius: var(--border-radius);
  padding-inline: var(--padding-inline);
  padding-block: var(--padding-block);
  box-sizing: border-box;
  box-shadow:
    0 1px 2px 0 rgba(60 64 67/.3),
    0 2px 6px 2px rgba(60 64 67/.15);

  @media screen and (width <= 767px) {
    --padding-inline:
      max(var(--safe-area-left), .75em) 
      max(var(--safe-area-right), .75em);
    --padding-block: 1.5em .75em;
    --border-radius: 0px;
  }

  > * + * {
    margin-block: 1.5em;
  }

  .content-module__h2 {
    font-family: var(--headline-font-family);
    font-size: 1.75em;
    line-height: 1;
    margin-block-end: 1.0714em;
  }

  a {
    color: rgba(26 115 232);
    text-decoration: unset;

    @media (hover: hover) {
      &:not(:has(figure)):hover {
        text-decoration: underline;
      }
    }
  }

  p {
    font-size: 1em;
    line-height: 1.5;

    /* built-in pretty-paragraph */
    word-break: break-word;
    hyphens: auto;
    text-wrap: pretty;
    white-space: pre-wrap;
  }

  h3 {
    font-size: 1.125em;
    font-weight: 500;

    & ~ h3 {
      margin-block-start: 3em;
    }
  }

  code {
    font-size: .875em;
    color: rgba(55 71 79);
    font-weight: 600;
    line-height: 1.4;
    background-color: rgba(232 234 237);
    padding-inline: 6px;
    border-radius: 4px;
    display: inline-block;
  }

  figure {
    inline-size: 100%;
    overflow: hidden;
    display: block;

    img {
      max-inline-size: 100%;
      background-color: rgba(246 248 250);
      overflow: hidden;
      border-radius: .5em;
    }

    figcaption {
      font-size: .75em;
      line-height: 1.5;
      text-align: center;
      color: rgba(88 88 88);
    }
  }

  ol,ul {
    padding-inline-start: 2.5em;

    li {
      line-height: 1.5;
      margin-block: .5em;

      > * + * {
        margin-block: 1em;
      }
    }
  }

  ol {
    list-style: decimal outside;
  }

  ul {
    list-style: disc outside;
  }

  strong {
    font-weight: 600;
  }

  kbd {
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    color: #242729;
    text-shadow: 0 1px 0 #fff;
    border: 1px solid #adb3b8;
    white-space: nowrap;

    inline-size: fit-content;
    min-inline-size: 22px;
    block-size: 22px;
    font-family: system-ui;
    font-size: 14px;
    color: rgba(150 159 175);
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 4px;
    padding: 6px 6px;

    background: linear-gradient(-225deg, rgba(213 219 228), rgba(248 248 248));
    box-shadow: inset 0 -2px 0 0 rgba(205 205 230), inset 0 0 1px 1px rgba(255 255 255), 0 1px 2px 1px rgba(30 35 90/.4);
    border-radius: 3px;
  }

  .content-checklist {
    list-style: none;
    padding-inline-start: 16px;

    li {
      padding-inline-start: 24px;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAWlBMVEUAAAAxokwwoks1pFAxokwxokwxokwxokwxokwnnkQnnkQnnkRou3y84cTS69cxokwonkQxokwnnkRqvH1VsmtluXlVsmsnnkRdtnLw+PIxokwqn0YinEAfmj3goh/UAAAAGnRSTlMA2CcEo+6AQT7+2IOBJxPl27alhoBnX15SCCe258UAAAB+SURBVEjH7dA5EoAgEERR3BcQ923Q+1/T0SqKlNbMouP3gxkRFvZpyQb64VSQT4mOcYc8mU5DnqIG8zXoozj4d34tML+YrET8XBFx4e2F4oAL4N7J3EUB/EfSUwD/zG3hvFdROu9XtL31vgXguQA9F6DnAvM8WbOHpkXYD3cBBCcPjtASYjwAAAAASUVORK5CYII=) no-repeat 0% 2px/20px 20px;
    }
  }

  .content-special {
    background-color: rgba(230 244 234);
    border: 1px solid rgba(19 115 51);
    border-inline-start-width: .25em;
    border-radius: .25em;
    padding: 1em 1.25em;

    p {
      /*font-size: .875em;*/
      line-height: 1.5;
    }
  }

  .content-warn {
    background-color: rgba(254 247 224);
    border: 1px solid rgba(234 134 0);
    border-inline-start-width: .25em;
    border-radius: .25em;
    padding: 1em 1.25em;

    p,li {
      /*font-size: .875em;*/
      line-height: 1.5;
    }

    strong:has(~ul) {
      font-size: .875em;
    }
  }



  &.content-module--sample1 {
    block-size: 150dvb;
  }

  &.content-module--sample2 {
    block-size: 200dvb;
  }
}