:root {
  --po-refresh-pull: 0px;
  --po-refresh-progress: 0;
}

.po-refresh-bay {
  display: none;
}

@media (max-width: 900px) and (pointer: coarse) {
  html.po-refresh-ready,
  html.po-refresh-ready body {
    overscroll-behavior-y: none;
  }

  html.po-refresh-ready body {
    overflow-x: hidden;
  }

  .po-refresh-shift {
    transform: translate3d(0, var(--po-refresh-pull), 0);
    will-change: transform;
  }

  .po-refresh-bay {
    height: var(--po-refresh-pull);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(30, 38, 46, 0.035) 1px, transparent 1px) 0 0 / 18px 18px,
      linear-gradient(180deg, #f7f8f9, #e9edf0);
    box-shadow: inset 0 -1px 0 rgba(23, 26, 31, 0.12);
    will-change: height;
  }

  .po-refresh-bay::after {
    content: "";
    height: 4px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #10b7c6 0 33.33%, #db3f78 33.33% 66.66%, #ffc72c 66.66% 100%);
    opacity: calc(0.2 + (var(--po-refresh-progress) * 0.8));
  }

  .po-cutter-machine {
    width: min(94vw, 610px);
    height: 154px;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
  }

  .po-cutter-carriage {
    height: 140px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    transform: translateY(calc(-12px + (var(--po-refresh-progress) * 12px)));
    will-change: transform;
  }

  .po-cutter-housing {
    height: 52px;
    position: absolute;
    top: 7px;
    right: 3%;
    left: 3%;
    z-index: 3;
    border: 1px solid #0f1317;
    border-radius: 5px 5px 2px 2px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%),
      linear-gradient(90deg, #20262c, #343b43 48%, #1b2025);
    box-shadow:
      0 8px 18px rgba(14, 18, 22, 0.2),
      inset 0 -5px 0 rgba(0, 0, 0, 0.24);
  }

  .po-cutter-label {
    position: absolute;
    top: 17px;
    left: 18px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.19em;
  }

  .po-cutter-bolts {
    position: absolute;
    top: 13px;
    right: 16px;
    display: flex;
    gap: 11px;
  }

  .po-cutter-bolts i {
    width: 14px;
    height: 14px;
    display: block;
    border: 1px solid #080a0c;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #eef2f4 0 12%, #a9b0b5 16% 40%, #555e65 44% 66%, #181d21 70%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .po-cutter-blade {
    height: 86px;
    position: absolute;
    top: 43px;
    right: 3%;
    left: 3%;
    z-index: 2;
    overflow: hidden;
    border: 1px solid #7e878e;
    background:
      linear-gradient(102deg, transparent 0 15%, rgba(255, 255, 255, 0.62) 25%, transparent 36% 64%, rgba(255, 255, 255, 0.42) 74%, transparent 84%),
      linear-gradient(180deg, #dce1e4 0%, #9da5ab 52%, #667078 88%, #eef2f4 90% 100%);
    box-shadow:
      0 11px 18px rgba(20, 24, 28, 0.23),
      inset 0 1px 0 #ffffff;
    filter: drop-shadow(0 1px 0 #626b72);
    clip-path: polygon(0 0, 100% 0, 100% 64%, 0 100%);
  }

  .po-cutter-blade::before {
    content: "";
    position: absolute;
    top: 17px;
    right: 4%;
    left: 4%;
    height: 3px;
    border-radius: 999px;
    background: rgba(45, 53, 59, 0.34);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
  }

  .po-cutter-blade-holes {
    position: absolute;
    top: 23px;
    right: 6%;
    left: 6%;
    z-index: 2;
    display: flex;
    justify-content: space-between;
  }

  .po-cutter-blade-holes i {
    width: 13px;
    height: 13px;
    display: block;
    border: 2px solid #697178;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #252b30 0 34%, #080a0c 38% 58%, #bbc1c5 62% 76%, #70787e 80%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.78), 0 1px 0 rgba(255, 255, 255, 0.55);
  }

  .po-cutter-blade::after {
    content: "";
    height: 2px;
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    transform: rotate(-3.1deg) scaleX(1.02);
    transform-origin: left center;
  }

  .po-cutter-bed {
    height: 11px;
    position: absolute;
    right: 2%;
    bottom: 10px;
    left: 2%;
    z-index: 4;
    border-radius: 2px;
    background: linear-gradient(180deg, #444c53, #101418);
    box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.5), 0 4px 10px rgba(13, 17, 21, 0.25);
    opacity: calc(var(--po-refresh-progress) * 1);
  }

  .po-refresh-bay.is-armed .po-cutter-bed {
    background: linear-gradient(180deg, #10b7c6 0 3px, #444c53 3px, #101418);
  }

  .po-refresh-bay.is-settling,
  .po-refresh-bay.is-cutting,
  .po-refresh-settling .po-refresh-shift,
  .po-refresh-cutting .po-refresh-shift {
    transition: height 320ms cubic-bezier(.22, .8, .25, 1), transform 320ms cubic-bezier(.22, .8, .25, 1);
  }

  .po-refresh-bay.is-cutting .po-cutter-carriage {
    animation: po-cutter-slice 460ms cubic-bezier(.5, 0, .12, 1) both;
  }

  .po-refresh-bay.is-cutting .po-cutter-bed {
    animation: po-cutter-bed-flash 460ms ease both;
  }

  .po-refresh-pulling .quick-contact-float,
  .po-refresh-cutting .quick-contact-float {
    opacity: 0;
    pointer-events: none;
  }

  @keyframes po-cutter-slice {
    0% { transform: translateY(0); }
    58% { transform: translateY(13px); }
    76% { transform: translateY(7px); }
    100% { transform: translateY(9px); }
  }

  @keyframes po-cutter-bed-flash {
    0%, 45% { box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.5), 0 4px 10px rgba(13, 17, 21, 0.25); }
    60% { box-shadow: 0 -3px 0 #ffc72c, 0 0 18px rgba(255, 199, 44, 0.9); }
    100% { box-shadow: 0 -2px 0 rgba(255, 255, 255, 0.5), 0 4px 10px rgba(13, 17, 21, 0.25); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .po-refresh-bay,
  .po-refresh-shift,
  .po-cutter-carriage,
  .po-cutter-housing,
  .po-cutter-blade,
  .po-cutter-bed {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}