body.premium-preview-open {
  overflow: hidden;
}
.premium-preview {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--border, #36404b);
  border-radius: 24px;
  background: var(--panel, #171c24);
  color: var(--text, #f2f5f8);
  box-shadow: 0 28px 100px #0007;
  overflow: auto;
}
.premium-preview::backdrop {
  background: #080d18b8;
  backdrop-filter: blur(8px);
}
.premium-preview-close {
  position: absolute;
  right: 14px;
  top: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #ffffff18;
  color: inherit;
  font-size: 24px;
  cursor: pointer;
}
.premium-preview-demo {
  position: relative;
  padding: 24px 32px 42px;
  background: radial-gradient(ellipse at 25% 10%, #517bb94a, transparent 70%), #141c29;
  color: #f1f5fc;
  overflow: hidden;
  min-height: 235px;
}
.preview-toolbar {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #a9b9d2;
  padding-right: 35px;
}
.preview-toolbar span:first-child {
  font-size: 17px;
  font-weight: 700;
  color: white;
}
.preview-project {
  font-size: 10px;
  letter-spacing: 0.12em;
  margin: 24px 0 12px;
  color: #c1cfe3;
}
.preview-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.preview-tool {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 9px;
  padding: 15px 7px;
  background: #ffffff0a;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  min-width: 0;
}
.preview-tool b {
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  text-align: center;
}
.preview-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 22px;
  color: #fff;
}
.blue {
  background: #448cad;
}
.coral {
  background: #ba647c;
}
.lilac {
  background: #8b71bc;
}
.preview-heart {
  position: absolute;
  right: 8px;
  top: 7px;
  color: #748198;
  font-size: 12px;
}
.favorites .preview-heart {
  animation: preview-save 5s ease-in-out infinite;
}
.favorites .preview-tool:nth-child(2) .preview-heart {
  animation-delay: 0.6s;
}
.favorites .preview-tool:nth-child(3) .preview-heart {
  animation-delay: 1.2s;
}
.preview-caption {
  margin-top: 18px;
  font-size: 12px;
  color: #becde2;
  text-align: center;
}
.preview-pause {
  position: absolute;
  bottom: 10px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #b7c8e1;
  cursor: pointer;
  font-size: 9px;
}
.workspaces .preview-heart {
  display: none;
}
.workspaces .preview-tool:first-child {
  animation: preview-reorder-first 6s ease-in-out infinite;
}
.workspaces .preview-tool:nth-child(2) {
  animation: preview-reorder-second 6s ease-in-out infinite;
}
.premium-preview-copy {
  padding: 28px 32px 32px;
}
.premium-preview-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #80b9d5;
  font-weight: 600;
}
.premium-preview h2 {
  font-size: clamp(25px, 4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 12px 0;
}
.premium-preview-copy p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted, #b3bcc8);
  margin: 0 0 16px;
}
.premium-preview-copy .premium-preview-note {
  font-size: 12px;
  margin-bottom: 24px;
}
.preview-signup {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
}
.preview-plans {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: var(--muted, #b3bcc8);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
}
@keyframes preview-save {
  0%,
  10%,
  95%,
  100% {
    color: #748198;
    transform: scale(1);
  }
  25% {
    color: #ef8daa;
    transform: scale(1.2);
  }
  35%,
  80% {
    color: #ef8daa;
    transform: scale(1);
  }
}
@keyframes preview-reorder-first {
  0%,
  15%,
  90%,
  100% {
    transform: translateX(0);
  }
  35%,
  70% {
    transform: translateX(calc(100% + 10px));
    border-color: #84b5e4;
  }
}
@keyframes preview-reorder-second {
  0%,
  15%,
  90%,
  100% {
    transform: translateX(0);
  }
  35%,
  70% {
    transform: translateX(calc(-100% - 10px));
  }
}
.preview-paused * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .premium-preview * {
    animation: none !important;
  }
  .favorites .preview-heart {
    color: #ef8daa;
  }
  .preview-pause {
    display: none;
  }
}
@media (max-width: 420px) {
  .premium-preview-demo {
    padding-inline: 18px;
  }
  .premium-preview-copy {
    padding: 24px;
  }
  .preview-tool b {
    font-size: 10px;
  }
}
.feature-preview141 {
  width: min(820px, calc(100vw - 32px));
  border-radius: 22px;
}
.feature-preview141 .premium-preview-copy {
  padding: 28px 32px 8px;
}
.feature-preview141 .premium-preview-kicker {
  display: inline-block;
  background: #78b7dc22;
  color: #78b7dc;
  border-radius: 99px;
  padding: 8px 12px;
  font-size: 11px;
}
.feature-preview141 .premium-preview-demo {
  margin: 12px 24px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg);
  color: var(--text);
  min-height: 0;
}
.feature-preview141 .preview-bottom {
  padding: 10px 32px 28px;
}
.preview-screen-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.preview-screen-title > i {
  color: #da7296;
}
.preview-screen-title strong {
  font-size: 16px;
  font-weight: 500;
}
.preview-screen-title > span {
  font-size: 8px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-left: auto;
}
.preview-favorite-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.preview-favorite-grid .tool-card {
  height: 100%;
  min-height: 180px !important;
  padding: 18px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 12px;
  background: var(--panel);
}
.preview-favorite-grid .tool-card h3 {
  font-size: 12px !important;
  margin: 4px 0;
}
.preview-favorite-grid .tool-card p {
  font-size: 10px !important;
  line-height: 1.5;
}
.preview-real-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.preview-real-icon img {
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}
.demo-heart141 {
  position: absolute;
  right: 9px;
  top: 9px;
  border: 0;
  background: none;
  color: var(--muted);
  padding: 8px;
  cursor: pointer;
}
.demo-heart141[aria-pressed="true"] {
  color: #dc7899;
}
.preview-workspace-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}
.preview-workspace-tabs button {
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 8px 12px;
  background: var(--panel);
  color: var(--muted);
  font-size: 9px;
  cursor: pointer;
}
.preview-workspace-tabs button[aria-pressed="true"] {
  color: var(--text);
  border-color: #78b7dc;
}
.preview-workspace-apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.preview-workspace-apps article {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.preview-workspace-apps header {
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.preview-workspace-apps header strong {
  font-size: 10px;
  font-weight: 500;
}
.preview-workspace-apps header > i {
  margin-left: auto;
  color: var(--muted);
}
.preview-workspace-apps .preview-real-icon {
  width: 25px;
  height: 25px;
  border-radius: 6px;
}
.preview-app-viewport {
  height: 195px;
  overflow: hidden;
  position: relative;
}
.preview-app-viewport iframe {
  width: 900px;
  height: 650px;
  transform: scale(0.34);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
  background: var(--bg);
}
.feature-preview141 .preview-caption {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 16px 0 0;
}
.feature-preview141 .premium-preview-close {
  color: var(--text);
  background: var(--panel2);
}
@media (max-width: 550px) {
  .feature-preview141 .premium-preview-copy {
    padding: 24px 20px 6px;
  }
  .feature-preview141 .premium-preview-demo {
    margin: 12px;
    padding: 12px;
  }
  .preview-favorite-grid {
    grid-template-columns: 1fr;
  }
  .preview-favorite-grid .tool-card {
    min-height: 0 !important;
    padding: 12px !important;
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
  }
  .preview-favorite-grid .tool-card p {
    display: none;
  }
  .preview-favorite-grid .tool-card h3 {
    padding-right: 20px;
  }
  .preview-workspace-apps {
    grid-template-columns: 1fr;
  }
  .preview-workspace-apps article:nth-child(2) {
    display: none;
  }
  .preview-app-viewport {
    height: 185px;
  }
  .feature-preview141 .preview-bottom {
    padding: 8px 20px 24px;
  }
}

.feature-preview141 .preview-favorite-grid .tool-card {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: 6px 12px !important;
  min-height: 125px !important;
  height: 125px !important;
}
.feature-preview141 .preview-favorite-grid .tool-card h3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  white-space: normal !important;
  padding-right: 5px !important;
}
.feature-preview141 .preview-favorite-grid .tool-card p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feature-preview141 .preview-real-icon {
  grid-column: 1;
  grid-row: 1 / 3;
}
.feature-preview141 .demo-heart141 {
  top: 2px !important;
  right: 3px !important;
}

/*!
PXLS | https://pxls.tools
Copyright (c) 2026 Matt Cannon. All rights reserved.

To the extent protected by applicable law, PXLS original source code,
original written content, artwork, and other original creative elements
are proprietary to Matt Cannon, except where otherwise identified.

Access to this website permits use of its tools as provided under the
site's terms. Public availability of source code does not grant a license
to copy, redistribute, sell, sublicense, or republish protected PXLS
material, or use that material to create a competing copy, without prior
written permission, except as permitted by applicable law.

Third-party libraries, fonts, icons, and other licensed components remain
subject to their respective licenses and copyright notices. This notice
does not restrict rights granted by those licenses, claim ownership of
user-provided material, or claim exclusive rights in ideas, methods,
functionality, or other material not protected by copyright.

For permission requests, contact PXLS through https://pxls.tools/pages/help.html.
*/