/* Playground override. Not part of the pinned upstream build.
 *
 * The runner floats a 40px back control in the top left of the viewport. This
 * header was a full-width band pinned to the top edge with square corners, so
 * that control landed on it -- on the logo mark, at narrow widths.
 *
 * So the header becomes the surface the right-hand panel already is: inset from
 * the edges, rounded, lifted off the artwork. Its left margin clears the disc by
 * --edge + 40 + 12, and that is the one thing here that has to track the site:
 * --edge steps 48, 32 below 1024px, 24 below 840px, 20 below 520px, and an
 * iframe cannot read its parent's custom properties. Miss a step and the gap
 * stops matching the one in the band either side of it.
 *
 * Margin rather than position: absolute on purpose. The header is the first
 * child of a column that sizes the canvas below it; taking it out of flow would
 * pull the artwork up under it.
 */
header {
  /* 20px, not 12: the disc is 40 tall at top 24, so its centre is at 44. This
     header is 48 tall, so it starts at 20 to put its own centre there too. The
     disc is the fixed one -- it sits in the same place on a case study, where
     there is no header to answer to -- so the header is what moves. */
  margin: 20px 12px 0 100px;
  border-radius: 999px;
  border: 1px solid rgb(86 101 116 / 18%);
  border-top-color: rgb(255 255 255 / 96%);
  box-shadow:
    0 24px 64px rgb(64 79 97 / 14%),
    0 2px 8px rgb(64 79 97 / 6%);
}

@media (max-width: 1024px) {
  header { margin-left: 84px; }
}

@media (max-width: 840px) {
  header { margin-left: 76px; }
}

@media (max-width: 520px) {
  header { margin-left: 72px; }
}