/* --imposter-top and --imposter-left are registered non-inheriting, so they
   must be set ON the .imposter and never reach a nested imposter. They are
   typed <length-percentage> with initial-value 50% (computationally
   independent, so browsers keep the rule): an invalid value such as `foo`
   falls back to 50% instead of making the inset `auto`. The -50% translate
   stays: the knobs place the imposter's CENTRE. */
@property --imposter-top {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --imposter-left {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

.imposter {
  position: absolute;
  inset-block-start: var(--imposter-top, 50%);
  inset-inline-start: var(--imposter-left, 50%);
  transform: translate(-50%, -50%);
}

.imposter.contain {
  --margin: 1rem;
  overflow: auto;
  max-inline-size: calc(100% - (var(--margin) * 2));
  max-block-size: calc(100% - (var(--margin) * 2));
}