/* The original model sits beside both the course title and its links. */
.course-header { --cat-size: 13.5rem; --cat-gap: 1rem; position: relative; text-align: left; }
.course-header.has-header-cat {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(var(--cat-size) + var(--cat-gap));
  min-height: var(--cat-size);
}
.course-header .course-links {
  justify-content: flex-start;
  margin: 1rem 0 0;
}
.course-header:has(+ .login-panel:not([hidden])) { margin-bottom: 2.5rem; }
.header-cat {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--cat-size);
  height: var(--cat-size);
  transform: translateY(-50%);
  pointer-events: none;
}
.header-cat[hidden] { display: none; }
.header-cat canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 40rem) {
  .course-header { --cat-size: 9.75rem; --cat-gap: .75rem; }
}