/* One selection moves between these two phrases without moving the text. */
.intro { position:relative; }
.design-selection-word {
  display:inline-block;
  line-height:1;
  white-space:nowrap;
}
.design-selection-text { display:inline-block; }
.design-selection-frame {
  --selection-blue:#58a6ff;
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  box-sizing:border-box;
  border:1px solid var(--selection-blue);
  pointer-events:none;
  transform-origin:0 0;
}
.design-selection-frame[hidden] { display:none; }
.design-selection-frame.is-moving { will-change:transform; }
.design-selection-frame i {
  position:absolute;
  width:5px;
  height:5px;
  border:1px solid var(--selection-blue);
  background:var(--paper);
}
.design-selection-frame i:nth-child(1) { top:-3px; left:-3px; }
.design-selection-frame i:nth-child(2) { top:-3px; right:-3px; }
.design-selection-frame i:nth-child(3) { bottom:-3px; left:-3px; }
.design-selection-frame i:nth-child(4) { bottom:-3px; right:-3px; }
.design-selection-size {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  padding:1px 5px;
  border-radius:3px;
  background:var(--selection-blue);
  color:#080b10;
  font:10px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  word-spacing:0;
  white-space:nowrap;
}
.design-selection-size:empty { display:none; }