/* Original vector artwork and motion values adapted from the reference intro. */
.about-copy .reference-sticker { overflow: visible; }
.reference-browser-scene { position: absolute; inset: 0; }
.reference-sticker .reference-window,
.reference-sticker .reference-cursor,
.reference-sticker .reference-layers,
.reference-sticker .reference-pencil { position: absolute; display: block; }
.reference-sticker picture,
.reference-sticker img { display: block; width: 100%; height: 100%; }
.reference-sticker img { image-rendering: auto; }

.reference-sticker .reference-window {
  left: 0; top: 0; width: 100%; aspect-ratio: 97.664 / 59.595;
  overflow: hidden; background: #fff;
  border: 1px solid #e3e3e3; border-radius: 7px;
  box-shadow: 0 3px 6px -2px rgb(0 0 0 / 16%);
}
.reference-sticker .reference-cursor {
  left: 54%; top: 26%; width: 38px; height: 20px; z-index: 2;
}
.reference-sticker .reference-layers {
  left: 2px; top: 0; width: 46px; height: 47px;
  border: 1.07px solid #e3e3e3; border-radius: 7px;
  box-shadow: 0 3.21px 6px -2.14px rgb(0 0 0 / 16%);
}
.reference-sticker .reference-pencil {
  left: 14px; bottom: -13px; width: 18px; height: 63px;
  filter: drop-shadow(2px 0 5px rgb(0 0 0 / 22%));
}

@media (max-width: 900px) {
  .reference-sticker .reference-window { aspect-ratio: 69 / 40.739; }
  .reference-sticker .reference-cursor { left: 70%; width: 26px; height: 14px; }
  .reference-sticker .reference-layers { left: 2px; width: 32px; height: 32px; }
  .reference-sticker .reference-pencil { left: 9px; bottom: -8px; width: 13px; height: 43px; }
}

@media (max-width: 360px) {
  .about-copy .about-introduction { font-size: 18px; }
}