.hp-art {
  position:relative;
  isolation:isolate;
  width:100%;
  height:340px;
  overflow:hidden;
  container-type:inline-size;
  color:var(--ink);
  background:var(--suite-depth);
  border-radius:16px;
  font-family:inherit;
  line-height:1.4;
}
.hp-art *,.hp-art *::before,.hp-art *::after {
  box-sizing:border-box;
}
.hp-art-space {
  position:absolute;
  width:550px;
  height:340px;
  left:50%;
  top:50%;
  translate:-50% -50%;
  scale:min(1.22,calc(100cqw / 550px));
  transform-origin:center;
}
.hp-art img {
  display:block;
}
.hp-logo {
  position:relative;
  display:block;
  width:76px;
  height:76px;
  object-fit:contain;
  z-index:2;
}
.hp-aura {
  position:absolute;
  width:370px;
  height:240px;
  left:90px;
  top:52px;
  pointer-events:none;
  border-radius:50%;
  filter:blur(34px);
  opacity:.6;
  animation:hp-breathe 6s ease-in-out infinite;
}
.hp-art svg {
  overflow:visible;
}
.hp-aura-pierre {
  background:radial-gradient(ellipse,color-mix(in srgb, var(--rule-strong) 33%, transparent),transparent 67%);
}
.hp-aura-axo {
  background:radial-gradient(ellipse,color-mix(in srgb, var(--ink-pale) 24%, transparent),transparent 66%);
}
.hp-aura-shift {
  background:radial-gradient(ellipse,color-mix(in srgb, var(--suite-shift) 16%, transparent),transparent 65%);
}
.hp-aura-foliot {
  background:radial-gradient(ellipse,color-mix(in srgb, var(--suite-foliot) 26%, transparent),transparent 65%);
}
.hp-aura-equanta {
  background:radial-gradient(ellipse,color-mix(in srgb, var(--rule-strong) 29%, transparent),transparent 65%);
}
.hp-aura-smelter {
  background:radial-gradient(ellipse,color-mix(in srgb, var(--suite-smelter) 29%, transparent),transparent 65%);
}
.hp-aura-coffre {
  background:radial-gradient(ellipse,color-mix(in srgb, var(--ink-pale) 17%, transparent),transparent 64%);
}
.hp-context-rails {
  position:absolute;
  inset:0;
  width:550px;
  height:340px;
  fill:none;
  stroke-linecap:round;
}
.hp-rail-base {
  stroke:color-mix(in srgb, var(--card) 65%, var(--leaf));
  stroke-width:1;
  opacity:.55;
}
.hp-rail-light {
  stroke:color-mix(in srgb, var(--leaf) 25%, var(--leaf-strong));
  stroke-width:1.6;
  filter:drop-shadow(0 0 4px color-mix(in srgb, var(--leaf) 40%, transparent));
}
.hp-rail-light path {
  stroke-dasharray:.12 .88;
  stroke-dashoffset:1;
  animation:hp-context-flow 6s cubic-bezier(.35,.05,.2,1) infinite;
}
.hp-rail-light .hp-rail-b {
  animation-delay:-1.4s;
}
.hp-rail-light .hp-rail-c {
  animation-delay:-3s;
}
.hp-rail-light .hp-rail-d {
  animation-delay:-4.3s;
}
.hp-context-label {
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  background:color-mix(in srgb, var(--suite-depth) 50%, var(--leaf-wash));
  border:1px solid color-mix(in srgb, var(--rule-strong) 50%, var(--leaf-wash));
  border-radius:5px;
  color:color-mix(in srgb, var(--ink-soft) 65%, var(--leaf-strong));
  font-size:12px;
  letter-spacing:-.01em;
  box-shadow:0 8px 24px color-mix(in srgb, var(--suite-depth) 13.3%, transparent);
}
.hp-context-label>i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink-pale) 25%, var(--leaf));
  box-shadow:0 0 9px color-mix(in srgb, var(--leaf) 20%, transparent);
}
.hp-context-products {
  left:63px;
  top:81px;
}
.hp-context-clients {
  left:70px;
  top:225px;
}
.hp-context-suppliers {
  right:47px;
  top:81px;
}
.hp-context-team {
  right:68px;
  top:225px;
}
.hp-context-core {
  position:absolute;
  left:208px;
  top:103px;
  width:134px;
  height:134px;
  display:grid;
  place-items:center;
  border-radius:35px;
  border:1px solid color-mix(in srgb, var(--leaf) 36%, transparent);
  background:linear-gradient(145deg,color-mix(in srgb, var(--rule) 47%, transparent),color-mix(in srgb, var(--suite-depth) 40%, var(--leaf-wash)));
  box-shadow:0 20px 40px color-mix(in srgb, var(--suite-depth) 40%, transparent),inset 0 1px color-mix(in srgb, var(--leaf-strong) 29%, transparent),0 0 50px color-mix(in srgb, var(--ink-pale) 6%, transparent);
  animation:hp-core-hover 6s ease-in-out infinite;
}
.hp-context-core .hp-logo {
  width:86px;
  height:86px;
  border-radius:24px;
}
.hp-core-glass {
  position:absolute;
  inset:8px;
  border:1px solid color-mix(in srgb, var(--leaf) 8%, transparent);
  border-radius:29px;
  background:linear-gradient(150deg,color-mix(in srgb, var(--leaf-strong) 4%, transparent),transparent 47%);
}
.hp-context-orbit {
  position:absolute;
  left:172px;
  top:67px;
  width:206px;
  height:206px;
  border:1px solid color-mix(in srgb, var(--ink-pale) 20%, transparent);
  border-radius:50%;
  transform:rotateX(14deg) rotateZ(-20deg);
  box-shadow:0 0 25px color-mix(in srgb, var(--suite-depth) 13.3%, transparent);
  animation:hp-orbit-breathe 6s ease-in-out infinite;
}
.hp-context-orbit-back {
  left:149px;
  top:44px;
  width:252px;
  height:252px;
  border-color:color-mix(in srgb, var(--ink-pale) 9%, transparent);
  transform:rotateX(26deg) rotateZ(18deg);
  animation-delay:-3s;
}
.hp-erp-sculpture {
  position:absolute;
  left:123px;
  top:56px;
  width:300px;
  height:227px;
  transform:perspective(1000px) rotateX(16deg) rotateY(-14deg) rotateZ(-6deg);
  transform-style:preserve-3d;
  animation:hp-erp-balance 6s ease-in-out infinite;
}
.hp-erp-slab {
  position:absolute;
  width:270px;
  height:178px;
  border:1px solid color-mix(in srgb, var(--rule-strong) 43%, transparent);
  border-radius:9px;
  background:linear-gradient(145deg,color-mix(in srgb, var(--card-2) 55%, var(--leaf-wash)),color-mix(in srgb, var(--well) 65%, var(--leaf-wash)));
  box-shadow:0 16px 32px color-mix(in srgb, var(--suite-depth) 26.7%, transparent);
}
.hp-erp-slab-back {
  left:34px;
  top:1px;
  transform:translateZ(-35px);
  background:color-mix(in srgb, var(--well) 55%, var(--leaf-wash));
  display:flex;
  gap:10px;
  padding:17px;
}
.hp-erp-slab-back>span {
  width:32px;
  height:4px;
  background:color-mix(in srgb, var(--rule) 70%, var(--leaf));
  border-radius:2px;
}
.hp-erp-slab-middle {
  left:18px;
  top:22px;
  transform:translateZ(-18px);
  display:flex;
  gap:8px;
  align-items:flex-end;
  padding:18px;
}
.hp-erp-slab-middle>i {
  width:44px;
  height:40px;
  border:1px solid color-mix(in srgb, var(--paper) 55%, var(--leaf));
  background:color-mix(in srgb, var(--rule-strong) 10%, var(--leaf-wash));
  border-radius:4px;
}
.hp-erp-slab-middle>i:nth-child(2) {
  height:65px;
}
.hp-erp-slab-middle>i:nth-child(3) {
  height:52px;
}
.hp-erp-slab-front {
  left:0;
  top:45px;
  overflow:hidden;
  transform:translateZ(8px);
  background:linear-gradient(120deg,color-mix(in srgb, var(--rule-strong) 40%, var(--leaf-wash)),color-mix(in srgb, var(--paper) 40%, var(--leaf-wash)) 60%,color-mix(in srgb, var(--ink-pale) 5%, var(--leaf-wash)));
  border-color:color-mix(in srgb, var(--ink-pale) 55%, transparent);
  box-shadow:0 25px 40px color-mix(in srgb, var(--suite-depth) 33.3%, transparent),inset 0 1px color-mix(in srgb, var(--leaf-strong) 14%, transparent);
}
.hp-erp-grid {
  position:absolute;
  right:16px;
  top:18px;
  width:93px;
  height:86px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.hp-erp-grid>i {
  border:1px solid color-mix(in srgb, var(--leaf) 19%, transparent);
  border-radius:4px;
  background:color-mix(in srgb, var(--rule-strong) 27%, transparent);
}
.hp-erp-grid>i:first-child {
  background:color-mix(in srgb, var(--ink-pale) 21%, transparent);
  border-color:color-mix(in srgb, var(--rule-strong) 25%, var(--leaf));
}
.hp-erp-command {
  position:absolute;
  left:27px;
  top:17px;
  width:100px;
  height:109px;
  display:grid;
  place-items:center;
}
.hp-erp-command .hp-logo {
  width:108px;
  height:108px;
  transform:scale(1.43);
  filter:drop-shadow(0 4px 9px color-mix(in srgb, var(--suite-depth) 13.3%, transparent));
}
.hp-erp-signal {
  position:absolute;
  right:2px;
  bottom:4px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:color-mix(in srgb, var(--rule) 5%, var(--leaf-strong));
  box-shadow:0 0 15px color-mix(in srgb, var(--leaf) 40%, transparent);
}
.hp-erp-bottom-line {
  position:absolute;
  bottom:19px;
  left:24px;
  right:24px;
  display:flex;
  gap:8px;
  border-top:1px solid color-mix(in srgb, var(--ink-pale) 27%, transparent);
  padding-top:14px;
}
.hp-erp-bottom-line>i {
  width:55px;
  height:4px;
  background:color-mix(in srgb, var(--rule) 50%, var(--leaf));
  border-radius:2px;
}
.hp-erp-bottom-line>i:nth-child(2) {
  width:86px;
  background:color-mix(in srgb, var(--ink-pale) 65%, var(--leaf));
}
.hp-erp-bottom-line>i:nth-child(3) {
  width:36px;
}
.hp-loyalty-tags {
  position:absolute;
  left:80px;
  right:67px;
  top:278px;
  display:flex;
  justify-content:center;
  gap:9px;
}
.hp-loyalty-tags>span {
  display:block;
  white-space:nowrap;
  font-size:12px;
  color:color-mix(in srgb, var(--ink-soft) 50%, var(--leaf-strong));
  padding:7px 10px;
  border:1px solid color-mix(in srgb, var(--card-2) 65%, var(--leaf));
  background:color-mix(in srgb, var(--suite-depth) 40%, var(--leaf-wash));
  border-radius:4px;
}
.hp-loyalty-tags>span:nth-child(2) {
  border-color:color-mix(in srgb, var(--card-2) 35%, var(--leaf));
  color:color-mix(in srgb, var(--ink) 75%, var(--leaf-strong));
}
.hp-shift-grid {
  position:absolute;
  left:106px;
  top:51px;
  width:342px;
  height:213px;
  display:flex;
  justify-content:space-between;
  transform:perspective(900px) rotateX(14deg) rotateZ(-6deg);
  border-top:1px solid color-mix(in srgb, var(--suite-shift) 24%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--suite-shift) 15%, transparent);
  background:color-mix(in srgb, var(--suite-shift) 1%, transparent);
}
.hp-shift-grid>i {
  width:1px;
  height:100%;
  background:linear-gradient(transparent,color-mix(in srgb, var(--suite-shift) 22%, transparent),transparent);
}
.hp-shift-band {
  position:absolute;
  height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border:1px solid color-mix(in srgb, var(--suite-shift) 47%, transparent);
  border-radius:7px;
  background:linear-gradient(100deg,var(--suite-shift),color-mix(in srgb, var(--suite-depth) 30%, var(--suite-shift)));
  box-shadow:0 13px 22px color-mix(in srgb, var(--suite-depth) 26.7%, transparent),inset 0 1px color-mix(in srgb, var(--ink) 33%, transparent);
  transform:rotate(-6deg);
  animation:hp-shift-settle 6s ease-in-out infinite;
}
.hp-shift-band-one {
  left:110px;
  top:85px;
  width:259px;
}
.hp-shift-band-two {
  left:160px;
  top:150px;
  width:276px;
  background:linear-gradient(100deg,color-mix(in srgb, var(--card) 55%, var(--suite-shift)),color-mix(in srgb, var(--paper) 25%, var(--suite-shift)));
  animation-delay:-2s;
}
.hp-shift-band-three {
  left:82px;
  top:216px;
  width:267px;
  background:linear-gradient(100deg,color-mix(in srgb, var(--ink) 20%, var(--suite-shift)),color-mix(in srgb, var(--card) 20%, var(--suite-shift)));
  animation-delay:-4s;
}
.hp-shift-node {
  width:10px;
  height:10px;
  flex:none;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink) 71%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--suite-shift) 4%, transparent);
}
.hp-shift-band>i {
  width:27px;
  height:5px;
  border-radius:2px;
  background:color-mix(in srgb, var(--suite-shift) 10%, transparent);
}
.hp-shift-band>i:nth-of-type(2) {
  width:55px;
}
.hp-shift-band>i:nth-of-type(3) {
  width:35px;
}
.hp-shift-anchor {
  position:absolute;
  left:240px;
  top:127px;
  width:83px;
  height:83px;
  display:grid;
  place-items:center;
  transform:rotate(-6deg);
  filter:drop-shadow(0 13px 20px color-mix(in srgb, var(--suite-depth) 40%, transparent));
}
.hp-shift-anchor>span {
  position:absolute;
  inset:-8px;
  border:1px solid color-mix(in srgb, var(--ink-soft) 28%, transparent);
  background:color-mix(in srgb, var(--suite-depth) 90%, var(--suite-shift));
  border-radius:24px;
  box-shadow:inset 0 1px color-mix(in srgb, var(--ink) 19%, transparent);
}
.hp-shift-anchor .hp-logo {
  width:78px;
  height:78px;
  border-radius:19px;
}
.hp-shift-label {
  position:absolute;
  left:0;
  right:0;
  top:290px;
  text-align:center;
  font-size:12px;
  letter-spacing:.02em;
  color:color-mix(in srgb, var(--ink-soft) 50%, var(--suite-shift));
}
.hp-calendar-sculpture {
  position:absolute;
  left:145px;
  top:55px;
  width:249px;
  height:234px;
  transform:perspective(900px) rotateX(12deg) rotateY(-9deg) rotateZ(-8deg);
  transform-style:preserve-3d;
  animation:hp-calendar-float 6s ease-in-out infinite;
}
.hp-calendar-page {
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,color-mix(in srgb, var(--suite-depth) 70%, var(--suite-foliot)),color-mix(in srgb, var(--well) 85%, var(--suite-foliot)) 65%,color-mix(in srgb, var(--well) 75%, var(--suite-foliot)));
  border:1px solid color-mix(in srgb, var(--ink-pale) 53%, transparent);
  border-radius:11px;
  box-shadow:0 25px 45px color-mix(in srgb, var(--suite-depth) 26.7%, transparent),inset 0 1px color-mix(in srgb, var(--ink) 13%, transparent);
  overflow:visible;
}
.hp-calendar-page-back {
  inset:12px -11px -12px 11px;
  background:color-mix(in srgb, var(--well) 95%, var(--suite-foliot));
  border-color:color-mix(in srgb, var(--card-2) 40%, var(--ink-pale));
  transform:translateZ(-20px);
}
.hp-calendar-binding {
  position:absolute;
  left:36px;
  right:36px;
  top:-11px;
  display:flex;
  justify-content:space-between;
}
.hp-calendar-binding>i {
  height:32px;
  width:13px;
  border:1px solid color-mix(in srgb, var(--ink) 30%, var(--suite-foliot));
  background:linear-gradient(90deg,color-mix(in srgb, var(--paper) 40%, var(--suite-foliot)),color-mix(in srgb, var(--ink) 45%, var(--suite-foliot)) 42%,color-mix(in srgb, var(--rule-strong) 45%, var(--suite-foliot)));
  border-radius:7px;
  box-shadow:0 4px 6px color-mix(in srgb, var(--suite-depth) 26.7%, transparent);
}
.hp-calendar-top-line {
  position:absolute;
  left:23px;
  right:23px;
  top:49px;
  border-top:1px solid color-mix(in srgb, var(--ink-pale) 22%, transparent);
}
.hp-calendar-cells {
  position:absolute;
  top:73px;
  left:23px;
  right:23px;
  bottom:26px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:11px;
}
.hp-calendar-cell {
  border-radius:4px;
  border:1px solid color-mix(in srgb, var(--ink-pale) 26%, transparent);
  background:color-mix(in srgb, var(--suite-foliot) 11%, transparent);
}
.hp-calendar-cell-2,.hp-calendar-cell-9 {
  background:color-mix(in srgb, var(--suite-foliot) 47.8%, transparent);
  border-color:color-mix(in srgb, var(--suite-foliot) 68%, transparent);
}
.hp-calendar-appointment {
  position:absolute;
  left:15px;
  top:117px;
  width:217px;
  height:49px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 14px;
  transform:translateZ(28px);
  background:linear-gradient(100deg,var(--suite-foliot),color-mix(in srgb, var(--well) 15%, var(--suite-foliot)));
  border:1px solid color-mix(in srgb, var(--ink) 71%, transparent);
  border-radius:6px;
  box-shadow:0 12px 18px color-mix(in srgb, var(--suite-depth) 25.1%, transparent);
  animation:hp-appointment-glide 6s ease-in-out infinite;
}
.hp-calendar-appointment>span {
  width:11px;
  height:11px;
  border-radius:50%;
  background:color-mix(in srgb, var(--ink) 85%, transparent);
}
.hp-calendar-appointment>i {
  width:42px;
  height:5px;
  border-radius:2px;
  background:color-mix(in srgb, var(--suite-foliot) 21%, transparent);
}
.hp-calendar-appointment>i:last-child {
  width:63px;
  opacity:.6;
}
.hp-calendar-seal {
  position:absolute;
  left:262px;
  top:73px;
  width:89px;
  height:89px;
  padding:8px;
  border:1px solid color-mix(in srgb, var(--suite-foliot) 39%, transparent);
  border-radius:24px;
  background:color-mix(in srgb, var(--suite-depth) 80%, var(--suite-foliot));
  box-shadow:0 14px 23px color-mix(in srgb, var(--suite-depth) 30.2%, transparent);
  transform:rotate(-8deg);
}
.hp-calendar-seal .hp-logo {
  width:72px;
  height:72px;
  border-radius:15px;
}
.hp-ledger-shadow {
  position:absolute;
  left:138px;
  top:261px;
  width:282px;
  height:28px;
  border-radius:50%;
  background:color-mix(in srgb, var(--suite-depth) 46.7%, transparent);
  filter:blur(16px);
}
.hp-ledger-book {
  position:absolute;
  left:119px;
  top:91px;
  width:318px;
  height:185px;
  transform:perspective(1000px) rotateX(22deg) rotateZ(-4deg);
  transform-style:preserve-3d;
  animation:hp-ledger-balance 6s ease-in-out infinite;
}
.hp-ledger-leaf {
  position:absolute;
  top:0;
  width:159px;
  height:185px;
  border:1px solid color-mix(in srgb, var(--ink-pale) 69%, transparent);
  background:linear-gradient(130deg,color-mix(in srgb, var(--leaf) 10%, var(--leaf-wash)),color-mix(in srgb, var(--suite-depth) 30%, var(--leaf-wash)));
  box-shadow:0 8px 0 color-mix(in srgb, var(--suite-depth) 55%, var(--leaf-wash)),0 9px 0 1px color-mix(in srgb, var(--leaf) 30%, var(--leaf-wash)),0 20px 30px color-mix(in srgb, var(--suite-depth) 20%, transparent);
}
.hp-ledger-leaf-left {
  left:0;
  border-radius:11px 0 0 9px;
  transform-origin:right;
  transform:rotateY(-16deg);
  padding:38px 27px;
}
.hp-ledger-leaf-left>span {
  display:block;
  height:5px;
  margin:15px 0;
  background:color-mix(in srgb, var(--ink-pale) 46%, transparent);
  border-radius:2px;
}
.hp-ledger-leaf-left>span:nth-child(2) {
  width:65%;
}
.hp-ledger-leaf-left>span:nth-child(4) {
  width:77%;
}
.hp-ledger-leaf-right {
  right:0;
  border-radius:0 11px 9px 0;
  transform-origin:left;
  transform:rotateY(16deg);
  background:linear-gradient(115deg,color-mix(in srgb, var(--suite-depth) 15%, var(--leaf-wash)),color-mix(in srgb, var(--leaf) 15%, var(--leaf-wash)));
}
.hp-ledger-spine {
  position:absolute;
  left:158px;
  top:5px;
  bottom:0;
  width:2px;
  background:color-mix(in srgb, var(--leaf) 39%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--leaf) 23%, transparent);
}
.hp-ledger-chart {
  position:absolute;
  left:3px;
  right:8px;
  top:15px;
  width:142px;
  height:144px;
  fill:none;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.hp-chart-guide {
  stroke:color-mix(in srgb, var(--rule-strong) 29%, transparent);
  stroke-width:1;
}
.hp-chart-area {
  fill:color-mix(in srgb, var(--leaf) 9%, transparent);
}
.hp-chart-line {
  stroke:color-mix(in srgb, var(--leaf) 80%, var(--leaf-strong));
  stroke-width:3;
  stroke-dasharray:1;
  stroke-dashoffset:0;
  animation:hp-chart-trace 6s ease-in-out infinite;
}
.hp-chart-dot {
  fill:color-mix(in srgb, var(--ink) 50%, var(--leaf-strong));
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--leaf) 50%, transparent));
}
.hp-ledger-seal {
  position:absolute;
  left:230px;
  top:55px;
  width:89px;
  height:89px;
  padding:8px;
  background:color-mix(in srgb, var(--suite-depth) 10%, var(--leaf-wash));
  border:1px solid color-mix(in srgb, var(--leaf) 51%, transparent);
  border-radius:24px;
  box-shadow:0 16px 26px color-mix(in srgb, var(--suite-depth) 33.3%, transparent);
  transform:rotate(-4deg);
}
.hp-ledger-seal .hp-logo {
  width:72px;
  height:72px;
  border-radius:17px;
}
.hp-delivery-rail {
  position:absolute;
  inset:0;
  width:550px;
  height:340px;
  fill:none;
  stroke-linecap:round;
}
.hp-delivery-base {
  stroke:color-mix(in srgb, var(--rule) 55%, var(--suite-smelter));
  stroke-width:1.3;
  opacity:.45;
}
.hp-delivery-light {
  stroke:color-mix(in srgb, var(--ink) 35%, var(--suite-smelter));
  stroke-width:1.8;
  stroke-dasharray:.12 .88;
  animation:hp-context-flow 6s cubic-bezier(.2,.6,.25,1) infinite;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--clay) 47%, transparent));
}
.hp-backlog {
  position:absolute;
  left:77px;
  top:106px;
  width:134px;
  height:160px;
  transform:perspective(700px) rotateY(-16deg) rotateZ(-7deg);
}
.hp-backlog-item {
  position:absolute;
  width:109px;
  height:82px;
  padding:16px 14px;
  border:1px solid color-mix(in srgb, var(--rule-strong) 65%, var(--suite-smelter));
  border-radius:6px;
  background:linear-gradient(125deg,color-mix(in srgb, var(--suite-depth) 85%, var(--ink)),color-mix(in srgb, var(--well) 95%, var(--ink)));
  box-shadow:0 14px 25px color-mix(in srgb, var(--suite-depth) 20%, transparent);
  animation:hp-backlog-shift 6s ease-in-out infinite;
}
.hp-backlog-one {
  top:0;
  left:17px;
  opacity:.58;
  animation-delay:-1.2s;
}
.hp-backlog-two {
  top:28px;
  left:8px;
  opacity:.77;
  animation-delay:-.6s;
}
.hp-backlog-three {
  top:56px;
  left:0;
  border-color:color-mix(in srgb, var(--ink-pale) 40%, var(--suite-smelter));
  animation-delay:0s;
}
.hp-backlog-item>i {
  display:block;
  width:15px;
  height:15px;
  border:1px solid color-mix(in srgb, var(--ink-soft) 40%, var(--suite-smelter));
  border-radius:3px;
  background:color-mix(in srgb, var(--suite-smelter) 20%, transparent);
  margin-bottom:11px;
}
.hp-backlog-item>span {
  display:block;
  width:67px;
  height:4px;
  background:color-mix(in srgb, var(--rule-strong) 65%, var(--suite-smelter));
  border-radius:2px;
  margin-top:6px;
}
.hp-backlog-item>span:last-child {
  width:42px;
  background:color-mix(in srgb, var(--rule) 70%, var(--suite-smelter));
}
.hp-smelter-core {
  position:absolute;
  left:230px;
  top:109px;
  width:104px;
  height:115px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--clay) 40%, transparent);
  border-radius:29px;
  background:linear-gradient(145deg,color-mix(in srgb, var(--suite-smelter) 9%, transparent),color-mix(in srgb, var(--suite-depth) 95%, var(--ink)));
  box-shadow:0 14px 25px color-mix(in srgb, var(--suite-depth) 33.3%, transparent),inset 0 1px color-mix(in srgb, var(--ink-soft) 13%, transparent);
}
.hp-smelter-core .hp-logo {
  width:83px;
  height:83px;
  filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--suite-depth) 20%, transparent));
}
.hp-smelter-core>i {
  position:absolute;
  left:46px;
  bottom:8px;
  width:11px;
  height:2px;
  background:color-mix(in srgb, var(--clay) 33%, transparent);
  filter:blur(3px);
}
.hp-delivered-object {
  position:absolute;
  left:376px;
  top:130px;
  width:94px;
  height:119px;
  transform:perspective(800px) rotateY(-15deg) rotateZ(5deg);
  animation:hp-delivery-settle 6s ease-in-out infinite;
}
.hp-delivered-edge {
  position:absolute;
  inset:7px -7px -7px 7px;
  border:1px solid color-mix(in srgb, var(--card-2) 50%, var(--suite-smelter));
  border-radius:7px;
  background:color-mix(in srgb, var(--suite-depth) 80%, var(--suite-smelter));
}
.hp-delivered-face {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding:17px 13px;
  border:1px solid color-mix(in srgb, var(--clay) 67%, transparent);
  border-radius:7px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--ink-pale) 25%, var(--suite-smelter)),color-mix(in srgb, var(--card-2) 50%, var(--suite-smelter)));
  box-shadow:0 16px 25px color-mix(in srgb, var(--suite-depth) 26.7%, transparent),inset 0 1px color-mix(in srgb, var(--ink-soft) 33%, transparent);
}
.hp-check {
  width:36px;
  height:36px;
  fill:none;
  stroke:color-mix(in srgb, var(--ink) 90%, var(--suite-smelter));
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hp-delivered-face>i {
  height:4px;
  width:50px;
  background:color-mix(in srgb, var(--ink-soft) 70%, transparent);
  border-radius:2px;
  margin-top:13px;
}
.hp-delivered-face>i:last-child {
  width:34px;
  margin-top:7px;
  opacity:.6;
}
.hp-backlog-caption,.hp-delivered-caption {
  position:absolute;
  top:284px;
  color:color-mix(in srgb, var(--ink-soft) 70%, var(--suite-smelter));
  font-size:12px;
  letter-spacing:.02em;
}
.hp-backlog-caption {
  left:95px;
}
.hp-delivered-caption {
  left:390px;
}
.hp-lock-shadow {
  position:absolute;
  left:181px;
  top:292px;
  width:203px;
  height:18px;
  background:color-mix(in srgb, var(--suite-depth) 53.3%, transparent);
  border-radius:50%;
  filter:blur(13px);
}
.hp-lock-sculpture {
  position:absolute;
  left:185px;
  top:41px;
  width:183px;
  height:246px;
  transform:perspective(900px) rotateY(-16deg) rotateX(6deg) rotateZ(-3deg);
  transform-style:preserve-3d;
  animation:hp-lock-balance 6s ease-in-out infinite;
}
.hp-lock-shackle {
  position:absolute;
  left:27px;
  top:0;
  width:128px;
  height:145px;
  border:19px solid color-mix(in srgb, var(--rule-strong) 75%, var(--leaf-strong));
  border-bottom-width:0;
  border-radius:63px 63px 0 0;
  background:transparent;
  box-shadow:inset 2px 1px 0 color-mix(in srgb, var(--ink) 49%, transparent),inset -3px 0 0 color-mix(in srgb, var(--rule) 41%, transparent),0 0 0 1px color-mix(in srgb, var(--ink-soft) 60%, transparent),2px 0 0 1px color-mix(in srgb, var(--rule-strong) 10%, var(--leaf-wash));
  overflow:hidden;
}
.hp-lock-shackle>i {
  position:absolute;
  left:-18px;
  top:-18px;
  right:-18px;
  bottom:0;
  border:3px solid color-mix(in srgb, var(--ink) 52%, transparent);
  border-bottom:0;
  border-radius:61px 61px 0 0;
  pointer-events:none;
}
.hp-lock-body-side {
  position:absolute;
  left:12px;
  right:-12px;
  top:110px;
  height:150px;
  background:color-mix(in srgb, var(--card) 40%, var(--leaf-wash));
  border:1px solid color-mix(in srgb, var(--rule) 55%, var(--leaf-strong));
  border-radius:16px;
  box-shadow:12px 18px 27px color-mix(in srgb, var(--suite-depth) 33.3%, transparent);
}
.hp-lock-body {
  position:absolute;
  left:0;
  right:0;
  top:101px;
  height:152px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--ink-pale) 69%, transparent);
  border-radius:16px;
  background:linear-gradient(115deg,color-mix(in srgb, var(--ink-pale) 60%, var(--leaf-wash)),color-mix(in srgb, var(--rule) 80%, var(--leaf)) 37%,color-mix(in srgb, var(--leaf) 5%, var(--leaf-wash)) 86%);
  box-shadow:inset 0 0 0 5px color-mix(in srgb, var(--suite-depth) 20%, var(--leaf-wash)),inset 0 0 0 6px color-mix(in srgb, var(--rule-strong) 65%, var(--leaf-strong));
  overflow:hidden;
}
.hp-lock-body .hp-logo {
  width:82px;
  height:82px;
  border-radius:18px;
  box-shadow:0 4px 16px color-mix(in srgb, var(--suite-depth) 20%, transparent);
  z-index:2;
}
.hp-lock-reflection {
  position:absolute;
  inset:-40px;
  width:55px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--ink) 21%, transparent),transparent);
  transform:skew(-20deg);
  animation:hp-steel-reflection 6s ease-in-out infinite;
  z-index:3;
  pointer-events:none;
}
.hp-lock-rivet {
  position:absolute;
  width:4px;
  height:4px;
  background:color-mix(in srgb, var(--ink-soft) 90%, var(--leaf-strong));
  border-radius:50%;
  box-shadow:0 1px 2px color-mix(in srgb, var(--suite-depth) 53.3%, transparent);
}
.hp-rivet-a {
  left:14px;
  top:14px;
}
.hp-rivet-b {
  right:14px;
  top:14px;
}
.hp-rivet-c {
  left:14px;
  bottom:14px;
}
.hp-rivet-d {
  right:14px;
  bottom:14px;
}
.hp-lock-seam {
  position:absolute;
  left:43px;
  right:43px;
  bottom:17px;
  height:1px;
  background:color-mix(in srgb, var(--ink-pale) 27%, transparent);
}
@keyframes hp-breathe {
  0%,100% {
    opacity:.45;
    scale:.96;
  }
  50% {
    opacity:.8;
    scale:1.06;
  }
}
@keyframes hp-core-hover {
  0%,100% {
    translate:0 2px;
  }
  50% {
    translate:0 -4px;
  }
}
@keyframes hp-orbit-breathe {
  0%,100% {
    opacity:.6;
    scale:.98;
  }
  50% {
    opacity:1;
    scale:1.035;
  }
}
@keyframes hp-context-flow {
  0% {
    stroke-dashoffset:1;
    opacity:.1;
  }
  20% {
    opacity:.8;
  }
  66% {
    stroke-dashoffset:0;
    opacity:.8;
  }
  88%,100% {
    stroke-dashoffset:0;
    opacity:.1;
  }
}
@keyframes hp-erp-balance {
  0%,100% {
    translate:0 2px;
    rotate:0deg;
  }
  50% {
    translate:0 -5px;
    rotate:1deg;
  }
}
@keyframes hp-shift-settle {
  0%,100% {
    translate:-4px 0;
  }
  45%,65% {
    translate:6px 0;
  }
}
@keyframes hp-calendar-float {
  0%,100% {
    translate:0 3px;
  }
  50% {
    translate:0 -4px;
  }
}
@keyframes hp-appointment-glide {
  0%,100% {
    translate:0 0;
    box-shadow:0 12px 18px color-mix(in srgb, var(--suite-depth) 25.1%, transparent);
  }
  45%,65% {
    translate:4px -3px;
    box-shadow:0 15px 24px color-mix(in srgb, var(--suite-depth) 33.3%, transparent);
  }
}
@keyframes hp-ledger-balance {
  0%,100% {
    translate:0 2px;
  }
  50% {
    translate:0 -4px;
  }
}
@keyframes hp-chart-trace {
  0%,100% {
    stroke-dashoffset:.08;
    opacity:.65;
  }
  35%,70% {
    stroke-dashoffset:0;
    opacity:1;
  }
}
@keyframes hp-backlog-shift {
  0%,100% {
    translate:0 2px;
  }
  50% {
    translate:4px -3px;
  }
}
@keyframes hp-delivery-settle {
  0%,100% {
    translate:0 3px;
    scale:.98;
  }
  50% {
    translate:0 -3px;
    scale:1;
  }
}
@keyframes hp-lock-balance {
  0%,100% {
    translate:0 2px;
  }
  50% {
    translate:0 -3px;
  }
}
@keyframes hp-steel-reflection {
  0%,20% {
    translate:-40px 0;
    opacity:0;
  }
  35% {
    opacity:.7;
  }
  68% {
    translate:235px 0;
    opacity:.5;
  }
  78%,100% {
    translate:235px 0;
    opacity:0;
  }
}
@media(max-width:620px) {
  .hp-art {
    height:290px;
    border-radius:12px;
  }
}
body[data-suite-motion="paused"] .hp-art *,body[data-suite-motion="paused"] .hp-art *::before,body[data-suite-motion="paused"] .hp-art *::after {
  animation-play-state:paused!important;
}
body[data-suite-motion="reduced"] .hp-art *,body[data-suite-motion="reduced"] .hp-art *::before,body[data-suite-motion="reduced"] .hp-art *::after {
  animation:none!important;
  transition:none!important;
}
@media(prefers-reduced-motion:reduce) {
  .hp-art *,.hp-art *::before,.hp-art *::after {
    animation:none!important;
    transition:none!important;
  }
}