/* A compact product display, with one featured object and two supporting pieces. */
#page-pieces .pe-hero .pe-visual{
  box-sizing:border-box;display:grid;grid-template-columns:1.1fr 1fr;
  grid-template-rows:1fr 1fr;grid-template-areas:"main arrange" "main equip";
  gap:12px;padding:14px;width:100%;max-width:460px;height:280px;margin:auto;
  background:linear-gradient(145deg,#234f6b,#102e45);
  border:1px solid #315b75;border-radius:8px 56px 8px 8px;
  box-shadow:0 16px 32px #183c5512;isolation:isolate;
}
#page-pieces .pe-visual .pe-orbit{display:none;}
#page-pieces .pe-visual .pe-object{
  position:relative;inset:auto;transform:none;box-sizing:border-box;
  width:100%;height:100%;min-width:0;min-height:0;gap:5px;padding:9px 12px;
  border:0;border-radius:5px;box-shadow:none;background:#f1f5f8;color:#31516b;
}
#page-pieces .pe-visual .pe-object span{font-size:9px;font-weight:650;letter-spacing:1.4px;}
#page-pieces .pe-visual .pe-object .pe-product{
  width:100%;max-width:100%;height:76px;object-fit:contain;
  filter:drop-shadow(0 7px 6px #18344a22);
}
#page-pieces .pe-visual .pe-object-b{grid-area:arrange;border-top-right-radius:42px;background:#f8fafc;}
#page-pieces .pe-visual .pe-object-a{grid-area:main;background:transparent;color:#e4eef5;gap:15px;padding:10px 0;}
#page-pieces .pe-visual .pe-object-a .pe-product{height:190px;filter:drop-shadow(0 12px 9px #061b315c);}
#page-pieces .pe-visual .pe-object-a span{width:80%;padding-top:13px;border-top:1px solid #adc9da44;text-align:center;}
#page-pieces .pe-visual .pe-object-c{grid-area:equip;background:#e3edf3;}
@media(max-width:760px){
  #page-pieces .pe-hero .pe-visual{max-width:430px;height:252px;gap:10px;padding:12px;border-top-right-radius:46px;}
  #page-pieces .pe-visual .pe-object-b{border-top-right-radius:34px;}
  #page-pieces .pe-visual .pe-object .pe-product{height:66px;}
  #page-pieces .pe-visual .pe-object-a .pe-product{height:165px;}
}

/* Replay once on entering this page, without a continuous animation. */
#page-pieces.active .pe-hero .pe-visual{animation:peDisplayEnter .4s ease-out both;}
#page-pieces.active .pe-visual .pe-object-a{animation:peObjectEnter .52s cubic-bezier(.2,.65,.3,1) .08s both;}
#page-pieces.active .pe-visual .pe-object-b{animation:peObjectEnter .52s cubic-bezier(.2,.65,.3,1) .16s both;}
#page-pieces.active .pe-visual .pe-object-c{animation:peObjectEnter .52s cubic-bezier(.2,.65,.3,1) .24s both;}
@keyframes peDisplayEnter{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes peObjectEnter{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
 #page-pieces.active .pe-hero .pe-visual,
 #page-pieces.active .pe-visual .pe-object{animation:none;}
}