.Demo {
  --demo-aspect-ratio: 4 / 3;
  --demo-max-size: 600px;
  background: var(--color-bg-3);
  border: var(--border-size-1) solid var(--color-bg-4);
  border-radius: var(--radius-2);
  display: grid;
  gap: var(--size-2);
  inline-size: fit-content;
  padding: var(--size-3);

  & figcaption {
    align-items: center;
    display: flex;
    font-family: var(--font-monospace);
    font-size: 14px;
    justify-content: space-between;
  }

  & canvas {
    aspect-ratio: var(--demo-aspect-ratio);
    background: white;
    border-radius: var(--radius-1);
    inline-size: min(min(var(--demo-max-size), 100vi), 100svb);
  }

  & .Button-group {
    margin: 0;
  }

  & .Button {
    --border-radius: var(--radius-1);
    --font-size: 14px;
    --padding-block: var(--size-1);
    --padding-inline: var(--size-2);
  }
}

.Demo--fullscreen {
  --demo-aspect-ratio: 16 / 9;
  --demo-max-size: 1920px;

  & canvas {
    background: black;
  }

  &.fullscreen {
    background: black;
    border: none;
    border-radius: 0;
    contain: strict;
    padding: 0;

    & figcaption {
      contain: layout;
      inset-block-start: 0;
      inset-inline: 0;
      padding: var(--size-3);
      position: fixed;
      z-index: 2;
    }

    & canvas {
      aspect-ratio: var(--demo-aspect-ratio);
      block-size: auto;
      inline-size: auto;
      inset: 0;
      margin: auto;
      max-block-size: 100vb;
      max-inline-size: min(100vi, var(--demo-max-size));
      position: fixed;
      z-index: 1;
    }
  }
}

.Demo--square {
  --demo-aspect-ratio: 1 / 1;
  --demo-max-size: 1080px;
}