/**
 * PluginPip 2027 | Miniature Interface Showcase
 * Original HTML/CSS/SVG artwork for websites, eCommerce, software and hosting.
 * No third-party images, font services, dependencies or javascript required.
 */
.pp-mini-showcase {
  position: relative;
  isolation: isolate;
  width: min(100%, 1460px);
  margin: clamp(5rem, 9vw, 9rem) auto clamp(3.5rem, 6vw, 6rem);
  padding: 1.4rem .25rem 2.4rem;
}
.pp-mini-showcase__connection {
  position: absolute;
  z-index: -1;
  left: -4.5%;
  right: -4.5%;
  top: 48%;
  height: 5px;
  border-radius: 20px;
  background: linear-gradient(90deg, transparent 0%, var(--lime) 9%, #91b736 49%, #a6c744 84%, transparent 100%);
  filter: drop-shadow(0 0 10px rgba(201, 245, 61, .24));
}
.pp-mini-showcase__node {
  position: absolute;
  top: 50%;
  width: 29px;
  height: 29px;
  border: 7px solid var(--lime);
  border-radius: 50%;
  background: var(--lavender);
  box-shadow: 0 0 0 5px rgba(201,245,61,.13), 0 0 19px rgba(201,245,61,.32);
  transform: translateY(-50%);
}
.pp-mini-showcase__node--left { left: -2px; }
.pp-mini-showcase__node--right { right: -2px; }
.pp-mini-showcase__pulse {
  position:absolute;
  left: 0;
  top: 50%;
  width: 62px;
  height: 6px;
  border-radius: 99px;
  background: #f4ff9b;
  box-shadow: 0 0 18px 6px rgba(201,245,61,.5);
  transform: translateY(-50%);
  animation: pp-mini-travel 11s ease-in-out infinite;
}
@keyframes pp-mini-travel {
  0%, 10% { left: 0%; opacity: 0; }
  18% { opacity: .95; }
  78% { left: calc(100% - 62px); opacity: .95; }
  88%, 100% { left: calc(100% - 62px); opacity: 0; }
}
.pp-mini-showcase__hint {display:none;}
.pp-mini-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(10px, 1.1vw, 19px);
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.pp-mini-card {
  --pp-card-tilt: 0deg;
  --pp-card-offset: 0px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: clamp(335px, 28.5vw, 422px);
  padding: clamp(7px, .7vw, 10px);
  border: 1px solid rgba(210,191,255,.62);
  border-radius: clamp(18px, 2vw, 29px);
  background: linear-gradient(146deg, #30204e 0%, #180e31 62%, #20123d 100%);
  box-shadow: 0 25px 29px -20px rgba(30,14,61,.55), 0 15px 0 -8px #7660b2, 0 34px 38px -24px rgba(66,29,132,.52);
  transform: translateY(var(--pp-card-offset)) rotate(var(--pp-card-tilt));
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), border-color .25s;
  color: #f7f1ff;
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.pp-mini-card--web { --pp-card-tilt: -3deg; --pp-card-offset: 12px; }
.pp-mini-card--shop { --pp-card-tilt: 2deg; --pp-card-offset: 0px; }
.pp-mini-card--software { --pp-card-tilt: -2deg; --pp-card-offset: 12px; }
.pp-mini-card--hosting { --pp-card-tilt: 2deg; --pp-card-offset: 1px; }
.pp-mini-card:hover, .pp-mini-card:focus-visible {
  transform: translateY(-14px) rotate(0deg) scale(1.018);
  z-index: 3;
  border-color: var(--lime);
  box-shadow: 0 27px 40px -16px rgba(24,9,51,.65), 0 16px 0 -7px #6f57a3, 0 0 25px rgba(201,245,61,.20);
}
.pp-mini-card:focus-visible { outline: 4px solid var(--lime); outline-offset: 5px; }
.pp-mini-card__browser {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.35rem;
  min-height:clamp(35px,3.6vw,44px);
  flex-shrink: 0;
  padding: 0 .45rem .3rem;
}
.pp-mini-card__dots { display:flex; gap:5px; flex-shrink:0; }
.pp-mini-card__dots i { display:block; width:clamp(6px,.8vw,10px); height:clamp(6px,.8vw,10px); border-radius:50%; background:#fa7880; }
.pp-mini-card__dots i:nth-child(2) { background:#f8d65f; }
.pp-mini-card__dots i:nth-child(3) { background:#62e367; }
.pp-mini-card__brand { display:inline-flex;align-items:center;gap:.3rem; font-size:clamp(.68rem,1.07vw,.93rem);font-weight:800;white-space:nowrap;line-height:1;letter-spacing:-.045em; }
.pp-mini-card__mark {display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#b7a0ff;color:#170c34;font-size:12px;font-style:italic;transform:skew(-9deg);}
.pp-mini-card__menu {width:17px;display:grid;gap:3px;justify-items:end;flex-shrink:0;}
.pp-mini-card__menu i {display:block;background:#f7f1ff;width:100%;height:2px;border-radius:9px;}
.pp-mini-card__menu i:last-child {width:65%;}
.pp-mini-card__cart {position:relative;display:inline-flex;justify-content:center;align-items:center;width:25px;height:24px;color:#fff;}
.pp-mini-card__cart svg {width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.pp-mini-card__cart b {position:absolute;right:-7px;top:-6px;display:grid;place-items:center;border-radius:100%;background:var(--lime);color:#1a1032;font-size:9px;line-height:1;width:17px;height:17px;}
.pp-mini-card__screen {display:block;flex:1;position:relative;min-height:0;overflow:hidden;border-radius:clamp(11px,1.3vw,17px);background:#231641;isolation:isolate;}
.pp-mini-card__footer {display:flex;align-items:center;gap:.65rem;min-height:clamp(54px,5.2vw,72px);padding:.5rem .35rem .05rem;color:#f8f5ff;}
.pp-mini-card__footer strong {flex:1;min-width:0;font-size:clamp(.83rem,1.5vw,1.37rem);font-weight:750;letter-spacing:-.035em;line-height:1.1;white-space:nowrap;}
.pp-mini-card__icon {display:grid;place-items:center;flex-shrink:0;width:clamp(28px,3.2vw,41px);height:clamp(28px,3.2vw,41px);color:var(--lime);}
.pp-mini-card__icon svg {width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.1;}
.pp-mini-card__chevron {width:8px;height:8px;border-right:2px solid var(--lime);border-top:2px solid var(--lime);transform:rotate(45deg);margin-right:.4rem;transition:transform .25s;flex-shrink:0;}
.pp-mini-card:hover .pp-mini-card__chevron, .pp-mini-card:focus-visible .pp-mini-card__chevron {transform:translateX(4px) rotate(45deg);}

/* Mini website UI: original editorial business homepage preview. */
.pp-mock-site {background:#52406f;}

.pp-mock-site::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,11,37,.82),rgba(13,11,37,.3) 80%),linear-gradient(0deg,rgba(13,11,37,.45),transparent 60%);z-index:0;}
.pp-mock-site__copy {position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(.7rem,1.3vw,1.2rem);}
.pp-mock-site__copy small {font-size:clamp(.43rem,.72vw,.64rem);letter-spacing:.16em;font-weight:750;color:#dfd6ff;}
.pp-mock-site__copy b {font-size:clamp(1.27rem,2.05vw,2.28rem);line-height:1.03;letter-spacing:-.055em;margin-top:clamp(.45rem,1.1vw,1rem);font-weight:850;}
.pp-mock-site__copy b em {font-style:normal;color:var(--lime);}
.pp-mock-site__lines {display:grid;gap:6px;margin-top:.8rem;width:60%;}
.pp-mock-site__lines i {height:5px;border-radius:5px;background:rgba(234,224,255,.6);width:100%;}
.pp-mock-site__lines i:last-child {width:68%;}
.pp-mock-site__button {display:inline-flex;align-items:center;gap:.5rem;background:var(--lime);color:#130a2b;border-radius:20px;padding:.42rem .75rem;font-size:clamp(.52rem,.78vw,.68rem);font-weight:800;margin-top:auto;white-space:nowrap;}
.pp-mock-site__button span {font-size:1rem;line-height:.5;}

/* Product collage: vector headphones and two supporting product previews. */
.pp-mock-shop {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.82fr);grid-template-rows:minmax(0,1fr) auto;gap:.4rem;padding:.48rem;background:#25153d;}
.pp-mock-shop__hero,.pp-mock-shop__side>span {position:relative;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden;border-radius:11px;background:linear-gradient(135deg,#7045ad,#372164 72%);}
.pp-mock-shop__headphones {display:block;width:94%;height:90%;max-width:none;filter:drop-shadow(2px 10px 9px rgba(18,9,37,.45));transform:rotate(-10deg);}
.pp-mock-shop__badge {position:absolute;left:.4rem;top:.4rem;background:var(--lime);color:#170a33;border-radius:9px;font-size:.55rem;font-weight:850;padding:.23rem .34rem;letter-spacing:.06em;}
.pp-mock-shop__side {display:grid;grid-template-rows:1fr 1fr;gap:.4rem;min-height:0;}
.pp-mock-shop__side svg {width:76%;height:86%;filter:drop-shadow(2px 6px 6px rgba(15,7,34,.28));}
.pp-mock-shop__watch {background:linear-gradient(145deg,#674b9b,#3e2b72)!important;}
.pp-mock-shop__controller {background:linear-gradient(145deg,#5b4293,#302056)!important;}
.pp-mock-shop__basket {grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:.45rem;background:var(--lime);color:#160b34;font-size:clamp(.64rem,.9vw,.85rem);font-weight:800;border-radius:14px;padding:.55rem .6rem;}
.pp-mock-shop__dot {width:10px;height:10px;border:2px solid currentColor;border-radius:3px;}

/* Software dashboard. Trend line is illustrative, not a real performance claim. */
.pp-mock-app {display:grid;grid-template-columns:clamp(32px,3.6vw,49px) minmax(0,1fr);padding:.45rem;gap:.4rem;background:linear-gradient(145deg,#281944,#1b1233);}
.pp-mock-app__rail {display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:.5rem .18rem;border-radius:9px;background:#1a1032;color:#dfd2ff;font-size:clamp(.7rem,1.5vw,1.15rem);font-weight:900;}
.pp-mock-app__rail span:first-child {color:var(--lime);}
.pp-mock-app__content {display:flex;flex-direction:column;gap:.35rem;padding:.52rem .45rem .3rem;border-radius:9px;background:linear-gradient(145deg,#23163f,#31214e);min-width:0;}
.pp-mock-app__caption {display:flex;align-items:center;justify-content:space-between;gap:.3rem;letter-spacing:.07em;font-size:clamp(.42rem,.62vw,.6rem);color:#ccc1ea;font-weight:800;}
.pp-mock-app__live {width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(201,245,61,.85);animation:pp-mini-glow 3s ease-in-out infinite;}
.pp-mock-app__chart {display:block;width:100%;flex:1;min-height:0;max-width:none;filter:drop-shadow(0 0 4px rgba(201,245,61,.16));}
.pp-mock-app__stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;}
.pp-mock-app__stats>span {display:flex;flex-direction:column;gap:.4rem;min-height:clamp(43px,4vw,58px);background:#3c2b5c;border-radius:8px;padding:.45rem .32rem;}
.pp-mock-app__stats i {width:50%;height:7px;border-radius:4px;background:var(--lime);opacity:.9;}
.pp-mock-app__stats>span:nth-child(2) i{background:#a4a0fc;}
.pp-mock-app__stats>span:nth-child(3) i{background:#ff8cc5;}
.pp-mock-app__stats b {width:80%;height:11px;border-radius:3px;background:rgba(234,218,255,.55);}

/* Managed hosting interface. No fabricated service guarantees or metrics. */
.pp-mock-host {display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,1.05fr);align-items:center;gap:.5rem;padding:clamp(.4rem,.8vw,.8rem);background:radial-gradient(ellipse at 28% 50%,#4d3478,#24153e 72%);}
.pp-mock-host__stack {display:grid;gap:clamp(5px,.75vw,10px);transform:perspective(500px) rotateY(-10deg);}
.pp-mock-host__server {display:flex;align-items:center;gap:.25rem;height:clamp(31px,4.3vw,55px);border-radius:8px;border:1px solid #76629d;background:linear-gradient(165deg,#70619a,#2d214e 72%);box-shadow:2px 5px 0 #16112c,2px 8px 10px rgba(10,4,19,.4);padding:0 .45rem;}
.pp-mock-host__server i {width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 6px var(--lime);flex-shrink:0;}
.pp-mock-host__server i:nth-child(2) {opacity:.5;}
.pp-mock-host__server b {margin-left:auto;width:30%;height:3px;border-radius:5px;background:rgba(202,189,232,.55);}
.pp-mock-host__checks {display:grid;gap:clamp(.2rem,.7vw,.65rem);min-width:0;}
.pp-mock-host__checks>span {display:flex;align-items:center;gap:clamp(.14rem,.36vw,.4rem);background:rgba(31,19,56,.83);color:#f8f1ff;border-radius:8px;padding:clamp(.25rem,.55vw,.48rem) clamp(.2rem,.48vw,.45rem);font-size:clamp(.48rem,.78vw,.75rem);font-weight:800;line-height:1.25;white-space:nowrap;}
.pp-mock-host__checks b {display:grid;place-items:center;flex-shrink:0;width:clamp(14px,1.5vw,21px);height:clamp(14px,1.5vw,21px);border-radius:50%;background:var(--lime);color:#1c1034;font-size:clamp(.55rem,.9vw,.8rem);}
@keyframes pp-mini-glow {50% {opacity:.58;box-shadow:0 0 4px rgba(201,245,61,.3);}}

@media (max-width:1110px) {
  .pp-mini-showcase { width:min(94%,790px); }
  .pp-mini-showcase__grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:2.1rem 1.5rem;}
  .pp-mini-card {height:398px;}
  .pp-mini-card__browser {min-height:44px;}
  .pp-mini-card__footer {min-height:64px;}
  .pp-mini-card__footer strong {font-size:1.26rem;}
  .pp-mini-card__icon {width:37px;height:37px;}
  .pp-mini-card__brand {font-size:.92rem;}
  .pp-mini-card__dots i {width:9px;height:9px;}
  .pp-mock-site__copy b {font-size:2rem;}
  .pp-mock-site__copy small {font-size:.62rem;}
  .pp-mock-site__button {font-size:.71rem;}
  .pp-mock-app__rail {font-size:1.2rem;}
  .pp-mock-host__checks>span {font-size:.72rem;gap:.4rem;padding:.48rem .42rem;}
  .pp-mock-host__checks b {width:21px;height:21px;font-size:.75rem;}
  .pp-mock-host__server {height:46px;}
  .pp-mini-showcase__connection {top:51%;}
}
@media (max-width:620px) {
  .pp-mini-showcase { width:calc(100vw - 1.2rem); max-width:none; margin:3.8rem 0 3.2rem calc(-.6rem); padding: .3rem 0 1.3rem; }
  .pp-mini-showcase__connection {left:-5%;right:-5%;top:44%;opacity:.75;}
  .pp-mini-showcase__grid {display:flex;align-items:stretch;gap:.95rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:1rem;overscroll-behavior-inline:contain;padding:1.1rem 1.05rem 2.3rem;scrollbar-width:thin;scrollbar-color:#8676bd transparent;}
  .pp-mini-card {flex:0 0 min(79vw,320px);height:373px;scroll-snap-align:start;--pp-card-tilt:0deg;--pp-card-offset:0px;}
  .pp-mini-card:hover,.pp-mini-card:focus-visible {transform:translateY(-5px);}
  .pp-mini-card__browser {min-height:43px;}
  .pp-mini-card__footer strong {font-size:1.12rem;}
  .pp-mock-site__copy b {font-size:1.9rem;}
  .pp-mini-showcase__hint {display:block;position:absolute;bottom:-.2rem;left:1.1rem;right:1.1rem;text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.015em;opacity:.7;margin:0;}
}
@media (max-width:350px) {
  .pp-mini-card {flex-basis:82vw;height:343px;}
  .pp-mini-card__footer strong {font-size:1rem;}
  .pp-mock-host__checks>span {font-size:.62rem;gap:.28rem;}
  .pp-mock-site__copy b {font-size:1.65rem;}
}
@media (prefers-reduced-motion:reduce) {
  .pp-mini-showcase__pulse,.pp-mock-app__live {animation:none;}
  .pp-mini-card,.pp-mini-card__chevron {transition:none;}
}