.commerce-overlay {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  width: 100vw;
  min-height: 100dvh;
  display: grid;
  isolation: isolate;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 20% 10%, rgb(69 200 218 / 10%), transparent 34%),
    rgb(2 6 8 / 88%);
  backdrop-filter: blur(22px) saturate(78%);
  -webkit-backdrop-filter: blur(22px) saturate(78%);
  animation: commerce-overlay-in 220ms ease-out both;
}

.commerce-dialog {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 56px));
  min-height: min(680px, calc(100dvh - 56px));
  max-height: calc(100dvh - 56px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(310px, .82fr) minmax(500px, 1.18fr);
  border: 1px solid rgb(119 219 234 / 22%);
  border-radius: 18px;
  background: #071015;
  box-shadow:
    0 52px 150px rgb(0 0 0 / 72%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  animation: commerce-dialog-in 440ms cubic-bezier(.16, 1, .3, 1) both;
}

.commerce-dialog::before {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 18%;
  left: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #79e7f4, transparent);
  content: "";
  opacity: .8;
}

.commerce-media {
  position: relative;
  min-height: 680px;
  overflow: hidden;
  border-right: 1px solid rgb(118 204 219 / 13%);
  background: #02080b;
}

.commerce-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(.76) contrast(1.08) brightness(.7);
  transform: scale(1.015);
}

.commerce-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(2 8 11 / 20%) 0%, rgb(2 8 11 / 9%) 26%, rgb(2 8 11 / 88%) 82%, #02080b 100%),
    linear-gradient(90deg, rgb(3 10 13 / 14%), rgb(3 10 13 / 38%));
}

.commerce-media-shade::after {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(137 227 240 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(137 227 240 / 4%) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
}

.commerce-media-copy {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 90px;
  left: 34px;
}

.commerce-media-copy > span {
  color: #79e7f4;
  font: 10px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .18em;
}

.commerce-media-copy strong {
  display: block;
  margin-top: 16px;
  color: #f2f7f8;
  font-size: clamp(32px, 3.1vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.055em;
}

.commerce-media-copy p {
  max-width: 340px;
  margin: 18px 0 0;
  color: rgb(195 220 225 / 68%);
  font-size: 11px;
  line-height: 1.75;
}

.commerce-media-track {
  position: absolute;
  z-index: 2;
  right: 34px;
  bottom: 34px;
  left: 34px;
  display: grid;
  grid-template-columns: 1fr repeat(3, 5px) auto;
  align-items: center;
  gap: 7px;
}

.commerce-media-track > span {
  height: 1px;
  background: linear-gradient(90deg, #62d8e8, rgb(98 216 232 / 18%));
}

.commerce-media-track > i {
  width: 5px;
  height: 5px;
  display: block;
  border: 1px solid rgb(116 224 240 / 32%);
}

.commerce-media-track > i:nth-of-type(2) {
  background: #75e1ef;
  border-color: #75e1ef;
}

.commerce-media-track > strong {
  margin-left: 6px;
  color: rgb(202 227 232 / 72%);
  font: 9px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .12em;
}

.commerce-panel {
  position: relative;
  min-width: 0;
  min-height: 680px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  padding: 54px 56px 28px;
  background:
    radial-gradient(circle at 88% 8%, rgb(93 218 236 / 7%), transparent 31%),
    linear-gradient(145deg, #101a1f, #071015 68%);
}

.commerce-close {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 22px;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(132 183 192 / 24%);
  border-radius: 10px;
  background: rgb(5 12 16 / 60%);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.commerce-close:hover {
  border-color: rgb(126 229 243 / 65%);
  background: rgb(24 51 58 / 72%);
  transform: translateY(-1px);
}

.commerce-close:focus-visible,
.commerce-primary-button:focus-visible,
.commerce-text-button:focus-visible,
.commerce-account:focus-visible,
.commerce-artifact button:focus-visible,
.commerce-loading button:focus-visible {
  outline: 2px solid #76e3f1;
  outline-offset: 3px;
}

.commerce-close span {
  position: absolute;
  top: 18px;
  left: 10px;
  width: 17px;
  height: 1px;
  background: #dce6e8;
}

.commerce-close span:first-child { transform: rotate(45deg); }
.commerce-close span:last-child { transform: rotate(-45deg); }

.commerce-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #75e3f1;
  font: 9px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .16em;
}

.commerce-kicker i {
  width: 26px;
  height: 1px;
  background: rgb(126 221 235 / 30%);
}

.commerce-kicker strong {
  color: rgb(226 240 242 / 62%);
  font-weight: 500;
  letter-spacing: .08em;
}

.commerce-heading h2 {
  max-width: 590px;
  margin: 18px 0 10px;
  color: #f2f6f7;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.058em;
}

.commerce-heading p {
  max-width: 540px;
  margin: 0;
  color: rgb(186 207 212 / 62%);
  font-size: 12px;
  line-height: 1.7;
}

.commerce-content {
  width: 100%;
  display: grid;
  margin: 34px 0 28px;
}

.commerce-state {
  width: 100%;
  display: grid;
  gap: 14px;
}

.commerce-auth-card,
.commerce-state-pending,
.commerce-state-restoring,
.commerce-offer-card,
.commerce-state-paying {
  border: 1px solid rgb(116 194 207 / 18%);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgb(17 33 40 / 84%), rgb(7 16 21 / 94%));
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.commerce-auth-card {
  padding: 24px;
}

.commerce-field {
  display: grid;
  gap: 9px;
}

.commerce-field label {
  color: rgb(221 234 237 / 76%);
  font-size: 11px;
  font-weight: 650;
}

.commerce-field input {
  width: 100%;
  height: 52px;
  border: 1px solid rgb(133 185 194 / 22%);
  border-radius: 10px;
  padding: 0 15px;
  background: rgb(1 7 10 / 64%);
  color: #f3f7f8;
  font-size: 16px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.commerce-field input::placeholder { color: rgb(156 180 185 / 34%); }

.commerce-field input:focus {
  border-color: rgb(118 227 241 / 72%);
  box-shadow: 0 0 0 3px rgb(102 220 235 / 8%);
}

.commerce-primary-button {
  position: relative;
  min-height: 52px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(128 236 248 / 48%);
  border-radius: 10px;
  padding: 0 20px;
  background: #68dbea;
  color: #041014;
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.commerce-primary-button::before {
  position: absolute;
  z-index: -1;
  inset: -180% -35%;
  background: conic-gradient(from 90deg, transparent 0 39%, rgb(255 255 255 / 78%) 46%, transparent 53% 100%);
  content: "";
  opacity: 0;
  transform: rotate(-35deg);
}

.commerce-primary-button:hover:not(:disabled) {
  background: #8be8f3;
  transform: translateY(-2px);
}

.commerce-primary-button:hover:not(:disabled)::before {
  opacity: .34;
  animation: commerce-moving-border 1.2s cubic-bezier(.16, 1, .3, 1) 1;
}

.commerce-primary-button:disabled,
.commerce-text-button:disabled,
.commerce-account:disabled,
.commerce-artifact button:disabled,
.primary-action:disabled,
.public-bundle-download:disabled,
.commerce-loading button:disabled {
  cursor: wait;
  opacity: .62;
}

.commerce-text-button {
  justify-self: center;
  border: 0;
  padding: 7px 10px;
  background: transparent;
  color: rgb(162 199 205 / 68%);
  font-size: 11px;
  cursor: pointer;
}

.commerce-text-button:hover:not(:disabled) { color: #88e6f2; }

.commerce-button-content,
.commerce-payment-status,
.primary-action__label,
.public-bundle-download strong,
.commerce-loading button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.commerce-spinner {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: commerce-spin 680ms linear infinite;
}

.commerce-session-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgb(167 193 198 / 52%);
  font-size: 10px;
}

.commerce-session-note > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #71dfed;
  box-shadow: 0 0 0 4px rgb(113 223 237 / 8%);
}

.commerce-phone-ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(123 193 204 / 14%);
  padding-bottom: 14px;
}

.commerce-phone-ticket span {
  color: rgb(170 199 204 / 54%);
  font-size: 10px;
}

.commerce-phone-ticket strong {
  color: #dbe9eb;
  font: 11px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .08em;
}

.commerce-state-pending,
.commerce-state-restoring {
  min-height: 220px;
  align-content: center;
  justify-items: start;
  padding: 30px;
}

.commerce-state-pending strong,
.commerce-state-restoring strong {
  color: #edf5f6;
  font-size: 21px;
}

.commerce-state-pending > span,
.commerce-state-restoring > span:not(.commerce-session-orbit) {
  color: rgb(174 201 205 / 58%);
  font-size: 11px;
}

.commerce-state-pending .commerce-primary-button { min-width: 170px; margin-top: 8px; }

.commerce-session-orbit {
  position: relative;
  width: 74px;
  height: 34px;
  display: block;
  margin-bottom: 10px;
}

.commerce-session-orbit i {
  position: absolute;
  top: 12px;
  width: 10px;
  height: 10px;
  border: 1px solid rgb(117 224 238 / 38%);
  border-radius: 3px;
}

.commerce-session-orbit i:nth-child(1) { left: 0; }
.commerce-session-orbit i:nth-child(2) { left: 28px; }
.commerce-session-orbit i:nth-child(3) {
  left: 56px;
  background: #75e0ee;
  border-color: #75e0ee;
  animation: commerce-session-travel 1.25s ease-in-out infinite alternate;
}

.commerce-state-ready { gap: 16px; }

.commerce-offer-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 24px;
}

.commerce-offer-card > div {
  display: grid;
  gap: 7px;
}

.commerce-offer-card > div span {
  color: #74dfed;
  font: 9px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .14em;
}

.commerce-offer-card > div strong {
  color: #eff5f6;
  font-size: 22px;
}

.commerce-price {
  align-self: end;
  color: #eff8f9;
  font-size: 34px;
  letter-spacing: -.06em;
}

.commerce-offer-card ul {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgb(126 195 206 / 14%);
  list-style: none;
}

.commerce-offer-card li {
  color: rgb(192 215 218 / 64%);
  font-size: 10px;
  line-height: 1.5;
}

.commerce-offer-card li::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border: 1px solid #6fdbe9;
  content: "";
  transform: rotate(45deg);
}

.commerce-state-paying {
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 20px;
}

.commerce-qr {
  position: relative;
  width: 208px;
  height: 208px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #f5f7f7;
}

.commerce-qr span {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  padding: 5px 0;
  background: rgb(245 247 247 / 92%);
  color: #1b3035;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
}

.commerce-pay-copy { display: grid; gap: 7px; }
.commerce-pay-copy > span { color: #75e1ef; font: 9px/1 Menlo, monospace; letter-spacing: .14em; }
.commerce-pay-copy > strong { color: #f1f7f8; font-size: 43px; letter-spacing: -.055em; }
.commerce-pay-copy p { margin: 6px 0 0; color: rgb(187 211 216 / 58%); font-size: 11px; }

.commerce-payment-status {
  justify-content: flex-start;
  margin-top: 10px;
  color: rgb(151 200 207 / 64%);
  font-size: 10px;
}

.commerce-state-owned { gap: 15px; }

.commerce-artifact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 12px;
}

.commerce-artifact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  border-radius: 14px;
  padding: 1px;
  background: rgb(118 208 222 / 14%);
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
}

.commerce-artifact::before {
  position: absolute;
  z-index: -2;
  inset: -90%;
  background: conic-gradient(
    from -40deg,
    transparent 0 68%,
    rgb(98 218 234 / 10%) 72%,
    #c7f9ff 77%,
    #66dceb 80%,
    transparent 86% 100%
  );
  content: "";
  opacity: 0;
}

.commerce-artifact::after {
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: 13px;
  background: linear-gradient(145deg, #102028, #071116 76%);
  content: "";
}

.commerce-artifact:hover {
  transform: translateY(-4px);
}

.commerce-artifact:hover::before {
  opacity: 1;
  animation: commerce-border-beam 1.8s cubic-bezier(.16, 1, .3, 1) 1;
}

.commerce-artifact-media {
  position: relative;
  height: 112px;
  overflow: hidden;
  border-radius: 13px 13px 6px 6px;
  background: #02070a;
}

.commerce-artifact-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgb(4 12 16 / 78%));
  content: "";
}

.commerce-artifact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.78);
  transition: transform 450ms cubic-bezier(.16, 1, .3, 1);
}

.commerce-artifact:hover .commerce-artifact-media img { transform: scale(1.035); }

.commerce-artifact-media span {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  left: 12px;
  color: #dffbff;
  font: 8px/1 Menlo, Monaco, Consolas, monospace;
  letter-spacing: .14em;
}

.commerce-artifact-body {
  display: grid;
  gap: 8px;
  padding: 15px;
}

.commerce-artifact-meta {
  display: flex;
  justify-content: space-between;
  color: rgb(157 190 196 / 46%);
  font: 8px/1 Menlo, Monaco, Consolas, monospace;
}

.commerce-artifact-body > strong {
  overflow: hidden;
  color: #edf5f6;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commerce-artifact-body > p {
  margin: 0;
  color: rgb(176 203 208 / 52%);
  font-size: 10px;
  line-height: 1.55;
}

.commerce-artifact button {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3px;
  border: 1px solid rgb(111 219 233 / 31%);
  border-radius: 9px;
  padding: 0 12px;
  background: rgb(65 190 207 / 9%);
  color: #94e8f2;
  font-size: 10px;
  font-weight: 680;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.commerce-artifact button:hover:not(:disabled) {
  border-color: rgb(127 230 242 / 62%);
  background: rgb(74 209 227 / 16%);
}

.commerce-download-note {
  color: rgb(158 186 191 / 46%);
  font-size: 9px;
  text-align: center;
}

.commerce-error {
  width: 100%;
  margin: 13px 0 0;
  border: 1px solid rgb(218 105 92 / 24%);
  border-left: 2px solid #e27769;
  border-radius: 8px;
  padding: 10px 12px;
  background: rgb(91 33 27 / 22%);
  color: #f0b9b2;
  font-size: 10px;
  line-height: 1.55;
}

.commerce-foot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  border-top: 1px solid rgb(116 185 196 / 12%);
  padding-top: 16px;
  color: rgb(153 184 190 / 46%);
  font: 9px/1.4 Menlo, Monaco, Consolas, monospace;
}

.commerce-account {
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: rgb(157 194 200 / 54%);
  font: inherit;
  cursor: pointer;
}

.commerce-account:hover:not(:disabled) { color: #87e4f0; }

.commerce-loading {
  min-width: min(420px, calc(100vw - 40px));
  display: grid;
  justify-items: center;
  gap: 15px;
  border: 1px solid rgb(117 211 225 / 22%);
  border-radius: 14px;
  padding: 30px;
  background: linear-gradient(145deg, #111d22, #071015);
  color: #dce8ea;
  font-size: 12px;
  box-shadow: 0 36px 100px rgb(0 0 0 / 58%);
}

.commerce-loading strong { font-size: 15px; }

.commerce-loading button {
  min-height: 42px;
  border: 1px solid rgb(121 226 239 / 48%);
  border-radius: 9px;
  padding: 0 18px;
  background: #6bdcea;
  color: #061115;
  font-weight: 750;
  cursor: pointer;
}

@keyframes commerce-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes commerce-dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes commerce-spin {
  to { transform: rotate(360deg); }
}

@keyframes commerce-border-beam {
  from { transform: rotate(-40deg); }
  to { transform: rotate(320deg); }
}

@keyframes commerce-moving-border {
  from { transform: rotate(-35deg); }
  to { transform: rotate(325deg); }
}

@keyframes commerce-session-travel {
  from { transform: translateX(-56px); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-overlay,
  .commerce-dialog,
  .commerce-spinner,
  .commerce-session-orbit i:nth-child(3),
  .commerce-artifact:hover::before,
  .commerce-primary-button:hover::before {
    animation: none;
  }

  .commerce-artifact,
  .commerce-artifact-media img,
  .commerce-close,
  .commerce-primary-button {
    transition: none;
  }

  .commerce-media video { display: none; }
  .commerce-media { background: #02080b url('/assets/showcase/codepen-showreel-v1.jpg') center / cover no-repeat; }
}

@media (max-width: 900px) {
  .commerce-dialog {
    grid-template-columns: 270px minmax(0, 1fr);
  }

  .commerce-media-copy {
    right: 24px;
    left: 24px;
  }

  .commerce-media-copy strong { font-size: 34px; }
  .commerce-media-track { right: 24px; left: 24px; }
  .commerce-panel { padding-right: 36px; padding-left: 36px; }
  .commerce-artifact-grid { grid-template-columns: 1fr; }
  .commerce-artifact { display: grid; grid-template-columns: 138px 1fr; }
  .commerce-artifact-media { height: 100%; min-height: 150px; border-radius: 13px 6px 6px 13px; }
}

@media (max-width: 680px) {
  .commerce-overlay {
    align-items: end;
    padding: 0;
  }

  .commerce-dialog {
    width: 100%;
    min-height: min(760px, 94dvh);
    max-height: 94dvh;
    display: block;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 18px 18px 0 0;
  }

  .commerce-media {
    min-height: 180px;
    border-right: 0;
    border-bottom: 1px solid rgb(118 204 219 / 13%);
  }

  .commerce-media video { object-position: center 36%; }
  .commerce-media-copy { right: 20px; bottom: 22px; left: 20px; }
  .commerce-media-copy > span,
  .commerce-media-copy p,
  .commerce-media-track { display: none; }
  .commerce-media-copy strong { margin: 0; font-size: 28px; }

  .commerce-panel {
    min-height: 0;
    overflow: visible;
    padding: 34px 20px 22px;
  }

  .commerce-close {
    position: fixed;
    top: calc(6dvh + 14px);
    right: 16px;
    background: rgb(5 12 16 / 84%);
  }

  .commerce-kicker { padding-right: 44px; }
  .commerce-heading h2 { padding-right: 20px; font-size: 36px; }
  .commerce-content { margin-top: 26px; }
  .commerce-auth-card { padding: 19px; }
  .commerce-state-paying { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .commerce-payment-status { justify-content: center; }
  .commerce-offer-card ul { grid-template-columns: 1fr; }
  .commerce-artifact-grid { grid-template-columns: 1fr; }
  .commerce-artifact { display: grid; grid-template-columns: 112px 1fr; }
  .commerce-artifact-media { min-height: 160px; }
  .commerce-artifact-body > strong { white-space: normal; }
  .commerce-foot { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .commerce-artifact { display: block; }
  .commerce-artifact-media { height: 104px; min-height: 0; border-radius: 13px 13px 6px 6px; }
}