:root {
      --bg: #FAF9F5;
      --bg-shade-200: #F2EEDF;
      --bg-shade-outline: #E0DDCF;

      --font-color: #212121;

      --spacing-32: 2rem;
      --sapcing-24: 1.5rem;
      --spacing-16: 1rem;
      --spacing-1: 0.063rem;

      --universal-transition: all 0.5s ease-in-out;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--bg);
      padding: var(--spacing-16);
    }

    ul {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-16);
      list-style: none;
    }

    @supports selector(::details-content) {
      :root {
        interpolate-size: allow-keywords;
      }

      details {
        border: var(--spacing-1) solid var(--bg-shade-outline);
        padding: clamp(1.5rem, calc(1.5rem + ((1vw - 0.28125rem) * 0.8081)), 2rem);
        border-radius: 1.5rem;
        transition: background-color 0.5s ease-in-out, border-color 0.5s ease-in-out;

        p {
          opacity: 0;
          line-height: 1.5;
          margin-block: var(--sapcing-24);
          transition: opacity 0.5s ease-in-out;
        }

        &[open] {
          background-color: var(--bg-shade-200);
          border-color: var(--bg-shade-200);

          circle-expand {
            svg {
              circle {
                stroke-dashoffset: var(--circle-length);
              }

              path:nth-of-type(2) {
                stroke-dashoffset: var(--top-length);
              }

              path:nth-of-type(3) {
                stroke-dashoffset: var(--bottom-length);
              }
            }
          }

          p {
            opacity: 1;
          }
        }
      }

      details::details-content {
        overflow: hidden;
        height: 0;
        transition: height 0.5s ease-in-out, content-visibility 0.5s ease-in-out allow-discrete, background-color 0.5s ease-in-out;
      }

      details[open]::details-content {
        background-color: var(--bg-shade-200);
        height: auto;
      }
    }

    @supports not (interpolate-size: allow-keywords) {
      html::before {
        content: 'Your browser does not support the interpolate-size property';
        display: block;
        font-family: 'Inter', sans-serif;
        padding: var(--spacing-16);
        background-color: var(--bg-shade-200);
        color: var(--font-color);
        font-weight: bold;
        border-radius: var(--spacing-24);
        margin: auto;
      }

      body {
        display: none;
      }
    }

    @supports not (selector(::details-content)) {
      html::before {
        content: 'Your browser does not support the ::details-content selector';
        display: block;
        font-family: 'Inter', sans-serif;
        padding: var(--spacing-16);
        background-color: var(--bg-shade-200);
        color: var(--font-color);
        font-weight: bold;
        border-radius: var(--spacing-24);
        margin: auto;
      }

      body {
        display: none;
      }
    }

    /* svg */
    circle-expand {
      --svg-length: 1.5rem;

      display: flex;

      svg {
        width: var(--svg-length);
        height: var(--svg-length);

        circle {
          stroke-dasharray: var(--circle-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }

        path:nth-of-type(2) {
          stroke-dasharray: var(--top-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }

        path:nth-of-type(3) {
          stroke-dasharray: var(--bottom-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }
      }
    }

    summary {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-32);
      list-style: none;
      cursor: pointer;
      transition: var(--universal-transition);

      /* avoid Windows insertion caret */
      caret-color: transparent;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::marker {
      content: '';
    }