.demo-elements {
  height: 12em;
  place-content: center;
  place-items: center;
  display: flex;
  grid-area: initial;
  anchor-scope: --position-area-anchor;
}

.demo-elements.tight {
  block-size: initial;
}

.demo-elements.semi-tight {
  block-size: 4em;
  inline-size: 4em;
}

.demo-elements.shifting,
.demo-elements.non-centered {
  border: 1pt dashed var(--brand-blue);
  position: relative;
  display: grid;
  height: 300px;
  width: 200px;
  padding: 0.3em;
  align-content: space-between;
}

.shifting .target {
  position-area: left center;
  block-size: 4em;
  opacity: 0.5;
}

.non-centered .target {
  position-area: left span-all;
}

.scope {
  anchor-scope: --position-area-anchor;
}

.position-area-demo-item {
  display: grid;
  gap: 1em;
}

.position-area-demo-item .anchor {
  anchor-name: --position-area-anchor;
  width: min-content;
}

.position-area-demo-item .target {
  position: absolute;
  position-anchor: --position-area-anchor;
  text-wrap: wrap;
}

.target.bottom-center {
  position-area: bottom center;
  padding-left: 50%;
}

.target.spanleft-top {
  padding-right: 50%;
  position-area: span-left top;
}

.target.spanall-left {
  position-area: span-all left;
}

.target.spanall-top {
  position-area: span-all top;
}

.target.center-left {
  position-area: center left;
}

.target.inlinestart-blockend {
  position-area: inline-start block-end;
}

.target.start-end {
  position-area: start end;
}

.target.end-start {
  position-area: end start;
}

.target.end {
  position-area: end;
}

#writing-mode .demo-elements,
#writing-mode-self .demo-elements {
  position: relative;
}

.target.logical-end {
  position-area: end;
}

.target.logical-self-end {
  position-area: self-block-end self-inline-end;
}

.target.shared-right-bottom {
  position-area: right bottom;
}

#cascade {
  position: relative;
}

#cascade-target {
  position-area: right top;
}

.cascade .target,
.cascade-override #cascade-target {
  position-area: right bottom;
}

.show-wrapper polyfill-position-area {
  background: repeating-linear-gradient(45deg, #ccc 0 5px, transparent 0 10px);
  outline: 1pt dotted var(--brand-orange);
}