astro-island,astro-slot,astro-static-slot{display:contents}

        .course-progress {
          margin: 1.25rem 0 1.75rem;
          padding: 0.75rem 0.875rem 0.55rem;
          border: 1px solid var(--grayscale-4);
          border-radius: 0.4rem;
          background: var(--grayscale-2);
        }
        .course-progress__header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
          color: var(--grayscale-9);
          font-size: 0.75rem;
          line-height: 1.2;
        }
        .course-progress__header a {
          color: var(--grayscale-12);
          font-weight: 650;
          text-decoration: none;
        }
        .course-progress__header a:hover {
          text-decoration: underline;
        }
        .course-progress__timeline {
          display: grid;
          grid-template-columns: repeat(8, minmax(0, 1fr));
          margin: 0.6rem 0 0;
          padding: 0;
          list-style: none;
        }
        .course-progress__timeline li {
          position: relative;
          min-width: 0;
          margin: 0;
        }
        .course-progress__timeline li:not(:last-child)::after {
          position: absolute;
          z-index: 0;
          top: 0.7rem;
          left: calc(50% + 0.7rem);
          width: calc(100% - 1.4rem);
          height: 2px;
          background: var(--grayscale-5);
          content: "";
        }
        .course-progress__timeline li.is-past::after {
          background: var(--grayscale-11);
        }
        .course-progress__timeline a {
          position: relative;
          z-index: 1;
          display: flex;
          min-width: 0;
          flex-direction: column;
          align-items: center;
          gap: 0.25rem;
          color: var(--grayscale-8);
          text-decoration: none;
        }
        .course-progress__node {
          display: inline-flex;
          width: 1.4rem;
          height: 1.4rem;
          align-items: center;
          justify-content: center;
          border: 1px solid var(--grayscale-5);
          border-radius: 999px;
          background: var(--grayscale-2);
          color: var(--grayscale-8);
          font-size: 0.625rem;
          font-weight: 700;
          line-height: 1;
          transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, transform 120ms ease;
        }
        .course-progress__timeline a:hover .course-progress__node {
          border-color: var(--grayscale-10);
          color: var(--grayscale-12);
          transform: translateY(-1px);
        }
        .course-progress__timeline li.is-past .course-progress__node {
          border-color: var(--grayscale-11);
          background: var(--grayscale-11);
          color: var(--grayscale-1);
        }
        .course-progress__timeline li.is-current .course-progress__node {
          border: 2px solid var(--grayscale-12);
          color: var(--grayscale-12);
          box-shadow: 0 0 0 2px var(--grayscale-2), 0 0 0 3px var(--grayscale-8);
          transform: scale(1.08);
        }
        .course-progress__label {
          max-width: 100%;
          overflow: hidden;
          color: var(--grayscale-8);
          font-size: 0.625rem;
          line-height: 1.15;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .course-progress__timeline li.is-current .course-progress__label {
          color: var(--grayscale-12);
          font-weight: 650;
        }