html, body {
  height: 100dvh;
  width: 100dvw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #111;
  color: white;
    --bg: #101418; --panel: #171d23; --line: #2a323b;
  --ink: #cdd6de; --dim: #7b8794; --faint: #4a5561;
}

body {
  min-height: 100dvh;
  padding: 0;
  margin: 0;
  display: grid;
  place-content: center;
  font-family: system-ui;
  text-align: center;
}

.info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  --box-size: 80px;
}

.box {
  position: absolute;
  width: var(--box-size);
  height: var(--box-size);
  display: grid;
  place-items: center;
  user-select: none;

  /* The anchor! */
  anchor-name: attr(name type(<custom-ident>));

  border: 2px solid color-mix(in srgb, var(--c, black) 45%, var(--line));
  background: color-mix(in srgb, var(--c, black) 12%, var(--panel));
  color: color-mix(in srgb, var(--c, black) 70%, #fff);
}
.box:active {
  cursor: grabbing;
}
.badge {
  position: absolute;
  background: blue;
  color: white;
  padding: 1rem 0.5rem;
  /* top: calc(anchor(--a top)); */
  /* left: calc(anchor(--a left) + anchor-size(--a width) / 2); */
  
  position-anchor: --a;
  top: calc(anchor(--a top) - 2rem);
  left: calc(anchor(--a left) + anchor-size(--a width) / 2);
  align-self: anchor-center;
  translate: -50% -100%;
}

.rect {
  pointer-events: none;
  /* border: solid 2px blue; */
  --a-inside: calc(anchor(--a inside) + anchor-size(--a) / 2);
  --b-inside: calc(anchor(--b inside) + anchor-size(--b) / 2);
  top: var(--a-inside);
  left: var(--a-inside);
  bottom: var(--b-inside);
  right: var(--b-inside);

  --x: attr(x type(<custom-ident>));
  --y: attr(y type(<custom-ident>));
}

.rect > div {
  --b: 4px;
  --s: calc(var(--box-size) / 2);
  position: absolute;
  --self-x: calc(anchor(var(--x) inside) + anchor-size(var(--x)) / 2 - .1px);
  --self-y: calc(anchor(var(--y) inside) + anchor-size(var(--y)) / 2);
  container-type: size;
}

.rect > div { color: white; }

.rect :is(.a,.b) {
  top: var(--self-x);
  bottom: var(--self-y);
}
.rect :is(.a,.c) {
  left: var(--self-x);
  right: var(--self-y);
}
.rect :is(.c,.d) {
  top: var(--self-y);
  bottom: var(--self-x);
}
.rect :is(.b,.d) {
  left: var(--self-y);
  right: var(--self-x);
}

.rect > div:before,
.rect > div:after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed;
  padding: 6px;

  /* WILD TRICK */
  display: if(
    style(
      calc(
        sign(1cqw) * sign(1cqh)) = 0): none);

  /* LINE */
  border: var(--b) solid;
}

.rect > div:before {
  --line-h: shape(from var(--s) 0, line to calc(100% - var(--s)) 100%);
  --line-v: shape(from 0 var(--s), line to 100% calc(100% - var(--s)));
  border-shape: if(style(100cqh < 100cqw): var(--line-h); else: var(--line-v)) padding-box;

   --ortho-h: shape(from var(--s) 0, hline to 50%, vline to 100%, hline to calc(100% - var(--s)));
  --ortho-v: shape(from 0 var(--s), vline to 50%, hline to 100%, vline to calc(100% - var(--s)));
  border-shape: if(style(100cqh < 100cqw): var(--ortho-h); else: var(--ortho-v)) padding-box;
}

.rect > div:after {
  content: attr(class);
  border: dashed 1px yellow;
  display: none;
}

.b { scale: -1 1; }
.c { scale: 1 -1; }
.d { scale: -1 -1; }

.label {
  position: absolute;
  top:  calc((anchor(var(--x) top)  + anchor-size(var(--x) height)/2
            + anchor(var(--y) top)  + anchor-size(var(--y) height)/2) / 2);
  left: calc((anchor(var(--x) left) + anchor-size(var(--x) width)/2
            + anchor(var(--y) left) + anchor-size(var(--y) width)/2) /2);
  translate: -50% -50%;
  background: #000c;
  border: 1px solid white;
  border-radius: 2rem;d 1px;
  padding: 0.25rem 0.5rem;
  font-size: 11px;
  font-weight: bold;
}

#s-red { 
  --c: #ff5252;
  top: 1rem;
       left: 1rem;
}
#s-green { 
  left: calc(100% - var(--box-size) - 1rem);
  top: 20%;
  --c: #4caf7d;
}
#s-yellow { 
  top: 60%;
  left: calc(50% - var(--box-size) / 2 );
  --c: #ffc94d }

.box {
  border-radius: 1rem;
  font-weight: bold;
  &:hover {
    cursor: grab;
  }
  &:active {
    cursor: grabbing;
  }
}

.box,
.rect {
  --duration: 4s;
  animation: activate 
    calc(sibling-count() * var(--duration)) linear infinite;

  animation-delay: calc(
      (sibling-count() * var(--duration) * -1)
    + (var(--duration) * sibling-index())
     );
}
@keyframes activate {
  0%, 33.3333333% { opacity: 1; }
  33.3333334%, 100% { opacity: 0.3; }
}