.unsupported {
  background: rgba(255,255,127,0.7);
  color: black;
  border: 3px solid rgb(160,160,80);
  border-radius: 10px;
  padding: 5px;
}

@supports(view-timeline-name: --named-timeline) {
  .unsupported {
    display: none;
  }
}

select {
  position: relative;
  z-index: 50;
  margin-block-start: var(--size-3);
}

.product-view {
  height: 2000px;
}

.feature {
  height: 150px;
  position: relative;
}

.feature3 {
  display: grid;
  gap: var(--size-2);
}

.line {
  background: currentColor;
  width: 1px;
  z-index: 1;
}

.line1 {
  left: 150px;
  top: 120px;
  height: 80px;
}

.line2 {
  height: 80px;
  left: 181px;
  top: 91px;
}

.line3 {
  height: 418px;
  left: 232px;
  top: 100px;
}

.sticky-view {
  position: sticky;
  top: 0;
}

.feature > div {
  position: absolute;
}

.perspective {
  perspective: 300px;
  height: 400px;
  perspective-origin: 0% 50%;
}

.phone {
  position: absolute;
  left: 30%;
  transform-style: preserve-3d;
  transform: rotateY(15deg);
  transform-origin: center left;
}

.phone > div {
  position: absolute;
}

.phone .face {
  width: 180px;
  border: 1px solid #777;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}

.face .bar {
  display: flex;
  height: 10px;
  padding: 2px;
  justify-content: stretch;
}

.face .bar:nth-child(1) {
  justify-content: center;
}

.flex {
  flex: 1;
}

.camera {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  border: 1px solid #ccc;
}

.speaker {
  width: 28px;
  height: 8px;
  border-radius: 5px;
  border: 1px solid #888;
}

.face .screen {
  flex: 1;
  margin: 0px 5px;
  border-radius: 4px;
}

.screen {
  position: relative;
}

.screen > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.screen > div:nth-child(1) {
  background-image: url(https://doodleipsum.com/394x700/hand-drawn?bg=63C8D9&i=9b12378de637a8663721fab14cdb9dbe);
  opacity: 1;
}
.screen > div:nth-child(2) {
  background-image: url(https://doodleipsum.com/394x700?bg=EB765D&i=166fbaec307d0c16778aa5f001d8787c);
}
.screen > div:nth-child(3) {
  background-image: url(https://doodleipsum.com/394x700?bg=EB765D&i=34b1669d12f4f37be2f8fda91b87b784);
}

.phone .face,
.phone .side {
  height: 400px;
}

.phone .side {
  transform-origin: top right;
  transform: rotateY(-90deg);
  left: -10px;
  width: 10px;
  background: #666;
}