/*
 * PluginPip 2027: original web-design interface artwork.
 * Replaces generic mountain/sunset placeholder SVGs with purposeful editorial UI.
 * All elements are local HTML and CSS, with no external assets.
 */
.pp-showcase-browser__site{
    background:#e9e6f5;
    isolation:isolate;
}
.pp-showcase-browser__site::after{
    background:linear-gradient(90deg,rgba(24,16,52,.9) 0%,rgba(24,16,52,.77) 42%,transparent 72%);
    z-index:1;pointer-events:none;
}
.pp-site-preview__surface{
    position:absolute;inset:0;overflow:hidden;
    background:linear-gradient(145deg,#1d1536 0%,#3e2a64 48%,#ddd4ef 48%,#ebe9f3 100%);
}
.pp-site-concept__canvas{position:absolute;inset:0;display:block;overflow:hidden;}
.pp-showcase-browser__site .pp-site-concept__pane{
    position:absolute;left:54%;top:-16%;width:52%;height:135%;
    background:#d6f057;transform:rotate(-14deg);border-radius:0 0 36px 0;
    box-shadow:-16px 0 0 rgba(31,21,52,.5);
}
.pp-showcase-browser__site .pp-site-concept__column{
    position:absolute;left:68%;top:8%;width:22%;height:80%;
    background:linear-gradient(155deg,#eee9fb 0%,#f9f6ff 52%,#8c6dd3 52%,#34244e 100%);
    transform:rotate(8deg);box-shadow:14px 12px 0 #2918415c;
}
.pp-showcase-browser__site .pp-site-concept__disc{
    position:absolute;right:-15%;top:30%;width:47%;aspect-ratio:1;border-radius:0;
    background:repeating-linear-gradient(0deg,#211739 0 5px,#3c2c5b 5px 12px,#f0eafa 12px 15px);
    transform:skewY(-13deg) rotate(8deg);
    box-shadow:-15px 15px 0 #25163b;
}
.pp-showcase-browser__site .pp-site-concept__label{
    position:absolute;z-index:1;right:11%;bottom:10%;width:25%;height:8%;
    background:#1c1134;border:3px solid #cafa39;
    box-shadow:8px 8px 0 #281542;
}
.pp-site-concept__badge{
    position:absolute;z-index:2;right:7%;top:9%;border:1px solid #271739;
    background:#f0edf9;color:#26173e;padding:.5em .75em;font-size:clamp(.43rem,.7vw,.7rem);
    font-weight:900;letter-spacing:.12em;transform:rotate(8deg);
}
.pp-showcase-browser__site-copy{
    z-index:3;max-width:64%;
    text-shadow:0 2px 8px rgba(12,7,35,.27);
}
.pp-showcase-browser__site-copy strong{
    font-weight:850;letter-spacing:-.055em;
}
.pp-showcase-browser__site-copy small{font-weight:760;}
/* Secondary homepage miniature browser illustration */
.pp-mock-site{
    isolation:isolate;background:#f1edfb;
}
.pp-mock-site::after{
    z-index:0;
    background:linear-gradient(90deg,rgba(26,16,49,.93) 0%,rgba(26,16,49,.76) 48%,transparent 84%);
}
.pp-mini-site-preview__surface{
    position:absolute;inset:0;overflow:hidden;display:block;
    background:linear-gradient(142deg,#23143d 0%,#49326a 55%,#dfdaf0 55%,#f5f1fd 100%);
}
.pp-mini-site-preview__surface .pp-site-concept__pane{
    position:absolute;left:60%;top:-9%;width:38%;height:120%;background:#c9f53d;
    transform:rotate(-17deg);box-shadow:-9px 0 0 #26163f;
}
.pp-mini-site-preview__surface .pp-site-concept__column{
    position:absolute;left:73%;top:20%;width:19%;height:70%;background:#eee7f9;transform:rotate(9deg);
    box-shadow:8px 8px 0 #291a47;
}
.pp-mini-site-preview__surface .pp-site-concept__disc{
    position:absolute;left:78%;top:44%;width:42%;height:35%;
    background:repeating-linear-gradient(0deg,#2f2050 0 4px,#b7a4db 4px 9px);transform:rotate(-16deg)
}
.pp-mini-site-preview__surface .pp-site-concept__label{
    position:absolute;left:65%;bottom:11%;width:22%;height:6%;background:#25173e
}
.pp-mini-site-preview__surface .pp-site-concept__badge{
    top:9%;right:6%;padding:.35em .45em;font-size:clamp(.36rem,.53vw,.56rem)
}
.pp-mock-site__copy{z-index:2}
.pp-mock-site__copy b{letter-spacing:-.06em}
@media (max-width:680px){
    .pp-showcase-browser__site-copy{max-width:67%}
    .pp-site-concept__badge{font-size:.38rem}
}
@media (prefers-reduced-motion:reduce){
    .pp-site-preview__surface,.pp-mini-site-preview__surface{animation:none}
}