#sequence-web-art {
  min-width: 0;
}

.web-device-composition {
  position: relative;
  width: 100%;
  aspect-ratio: 1.72;
  container-type: inline-size;
  isolation: isolate;
}

.web-laptop,
.web-phone {
  position: absolute;
}

.web-laptop {
  z-index: 1;
  inset: 3% 10% 8% 0;
  opacity: var(--laptop, 1);
  transform: translate3d(0, calc((1 - var(--laptop, 1)) * 14%), 0);
}

.web-laptop-angle {
  position: absolute;
  inset: 0;
  transform: perspective(130cqw) rotateY(-11deg) rotateZ(-5deg);
  transform-origin: center 63%;
}

.web-laptop-lid {
  position: absolute;
  z-index: 2;
  inset: 0 7.5% 15% 10%;
  padding: 2.1% 1.7% 2.6%;
  border: 1px solid #73716f;
  border-radius: 2.4cqw 2.4cqw 1cqw 1cqw;
  background: linear-gradient(146deg, #28282a 1%, #0a0a0a 21%, #111 90%, #333235);
  box-shadow: inset 0 1px 0 #b0aaa344, 0 0 0 1px #131313, 5px 2px 0 #262525;
}

.web-laptop-lid::after {
  position: absolute;
  top: 1.1%;
  left: 49.5%;
  width: 1%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #434852;
  content: "";
}

.web-laptop-base {
  position: absolute;
  z-index: 3;
  inset: 85% 0 1% 0;
  filter: drop-shadow(0 8px 8px #060605a8);
}

.web-laptop-deck {
  position: absolute;
  inset: 0;
  clip-path: polygon(10% 0, 92.5% 0, 100% 84%, 99% 100%, 2% 100%, 0 85%);
  background: linear-gradient(165deg, #2b2a2b 10%, #414042 42%, #797676 84%, #484647 93%);
}

.web-laptop-keys {
  position: absolute;
  inset: 11% 15% 45%;
  transform: perspective(29cqw) rotateX(24deg);
  border: 1px solid #92909560;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 4.7%, #747178 4.7% 5.3%),
    repeating-linear-gradient(0deg, #171717 0 15%, #777475 15% 19%);
  opacity: .84;
}

.web-laptop-pad {
  position: absolute;
  inset: 64% 40% 12%;
  transform: perspective(17cqw) rotateX(25deg);
  border: 1px solid #85818299;
  border-radius: 2px;
  background: #5c595b;
}

.web-laptop-lip {
  position: absolute;
  z-index: 4;
  inset: 97% 0 0 0;
  border-radius: 0 0 4cqw 4cqw;
  background: linear-gradient(180deg, #a9a2a3, #444243 36%, #171617 91%);
  box-shadow: 0 6px 8px #080808ac;
}

.web-phone {
  z-index: 5;
  right: 1%;
  bottom: 4%;
  width: 23%;
  height: 75%;
  opacity: var(--phone, 1);
  transform: translate3d(calc((1 - var(--phone, 1)) * 17%), calc((1 - var(--phone, 1)) * 12%), 0);
}

.web-phone-case {
  position: absolute;
  inset: 0;
  padding: 5%;
  transform: perspective(74cqw) rotateY(-8deg) rotateZ(2deg);
  border: 1px solid #a6a099;
  border-radius: 3.2cqw;
  background: #101010;
  box-shadow: 3px 1px #353232, 9px 13px 25px #030303a8;
}

.web-phone-case::after {
  position: absolute;
  inset: 3.7% 36% auto;
  height: 2.7%;
  border-radius: 50px;
  background: #151312;
  content: "";
}

.web-device-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .95cqw;
  background: #29261e;
  color: #fff6e2;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.web-device-nav {
  display: flex;
  flex: 0 0 12%;
  align-items: center;
  justify-content: space-between;
  padding: 0 7%;
  background: #201e18;
  font-size: 1.5cqw;
  font-weight: 750;
}

.web-device-nav-detail {
  color: #eee2ca;
  font-size: 1.13cqw;
  font-weight: 500;
}

.web-device-site {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: 4% 7%;
  background:
    linear-gradient(90deg, #17130de8 0, #17130d94 40%, #17130d1a 83%),
    url("assets/web.webp") 53% 52% / cover;
}

.web-device-site p {
  margin-bottom: 1.5%;
  color: #ead5ab;
  font-size: 1.4cqw;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.web-device-site strong {
  font: 400 6.8cqw/.85 "Instrument Serif", Georgia, serif;
  letter-spacing: -.045em;
}

.web-device-cta {
  margin-top: 4%;
  padding: 1.5% 3%;
  border-radius: 1px;
  background: #f3c45b;
  color: #211a11;
  font-size: 1.4cqw;
  font-weight: 800;
}

.web-phone .web-device-screen {
  border-radius: 2.65cqw;
}

.web-phone .web-device-nav {
  flex-basis: 18%;
  padding-top: 6%;
}

.web-phone .web-device-nav-detail {
  display: none;
}

.web-phone .web-device-site {
  justify-content: flex-end;
  padding: 8% 8% 14%;
  background:
    linear-gradient(0deg, #17130df5 1%, #17130d9c 47%, #17130d22 82%),
    url("assets/web.webp") 63% 50% / cover;
}

.web-phone .web-device-site strong {
  font-size: 4.25cqw;
}

.web-phone .web-device-site p {
  font-size: .96cqw;
}

.web-phone .web-device-cta {
  font-size: 1.2cqw;
  margin-top: 9%;
  padding: 4% 7%;
}