.parts-preview {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .5rem;
  overflow: hidden;
  background: var(--md-default-bg-color);
}
.parts-toolbar, .parts-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .65rem .8rem;
  font-size: .75rem;
}
.parts-toolbar { border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.parts-toolbar select {
  flex: 1 1 12em;
  min-width: 0;
}
.parts-toolbar select, .parts-toolbar button {
  color: var(--md-default-fg-color);
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .2rem;
  padding: .4rem .55rem;
  font: inherit;
}
.parts-toolbar button { cursor: pointer; }
.parts-toolbar :focus-visible { outline: .15rem solid var(--md-accent-fg-color); outline-offset: .1rem; }
.parts-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at center, var(--md-code-bg-color), var(--md-default-bg-color));
}
.parts-canvas canvas { position: absolute; inset: 0; display: block; max-width: 100%; }
.parts-caption { justify-content: space-between; border-top: 1px solid var(--md-default-fg-color--lightest); }
.parts-caption a { color: var(--md-typeset-a-color); }
.parts-hint { color: var(--md-default-fg-color--light); font-size: .7rem; }
.parts-preview:fullscreen { display: flex; flex-direction: column; }
.parts-preview:fullscreen .parts-canvas { flex: 1; min-height: 0; aspect-ratio: auto; }
.parts-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.parts-description { margin: 0; padding: 0 .8rem .65rem; font-size: .75rem; }
.parts-canvas:focus-visible { outline: .15rem solid var(--md-accent-fg-color); outline-offset: -.15rem; }