.wopm-portfolio{--wopm-accent:var(--e-global-color-primary,var(--wp--preset--color--primary,#225e72));--wopm-radius:16px;color:inherit;font:inherit;line-height:1.65;width:100%}
.wopm-portfolio *{box-sizing:border-box}
.wopm-portfolio h3{font-family:inherit;color:inherit;line-height:1.3}
.wopm-description{font-size:1.1em;max-width:75ch}
.wopm-reflections{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:1.8rem;margin:1.5rem 0}
.wopm-reflections h3{font-size:1.05em;margin:0 0 .6rem}
.wopm-tools{display:flex;gap:.5rem;flex-wrap:wrap;padding:0!important;list-style:none!important}
.wopm-tools li{border:1px solid currentColor;border-radius:999px;padding:.2rem .8rem;font-size:.85em}
.wopm-portfolio .wopm-button,.wopm-portfolio .wopm-exit{font:inherit;cursor:pointer;border:1px solid transparent;border-radius:8px;padding:.65rem 1.1rem;text-decoration:none;background:var(--wopm-accent,#225e72);color:#fff;line-height:1.4}
.wopm-portfolio a:focus-visible,.wopm-portfolio button:focus-visible{outline:3px solid #1683c4;outline-offset:4px}
.wopm-viewer{margin:2rem 0;min-width:0}
.wopm-device{position:relative;margin:0 auto 2rem;width:100%;max-width:100%;padding:18px 10px 10px;border:2px solid #656a73;border-radius:18px;background:linear-gradient(140deg,#353b44,#090b10 65%);box-shadow:0 18px 35px #1113,inset 0 0 0 2px #0b0d11}
.wopm-camera{position:absolute;top:6px;left:50%;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#547897,#101820 65%);box-shadow:0 0 0 2px #080b10}
.wopm-screen{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#fff;border-radius:4px;isolation:isolate}
.wopm-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#f5f7f9;color:#293440;font:500 14px/1.4 system-ui,sans-serif;text-align:center}
.wopm-spinner{display:block;width:38px;height:38px;border:4px solid #d5dde3;border-top-color:var(--wopm-accent,#225e72);border-radius:50%;animation:wopm-spin .85s linear infinite}
@keyframes wopm-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wopm-spinner{animation:none}}
.wopm-device img{display:block;width:100%;height:auto;margin:0}
.wopm-screen>.wopm-cover{height:100%;object-fit:cover;object-position:top}
.wopm-screen iframe{position:absolute;left:var(--wopm-view-left,0);top:var(--wopm-view-top,0);display:block;border:0!important;width:var(--wopm-view-width,1920px)!important;max-width:none!important;height:var(--wopm-view-height,1080px)!important;max-height:none!important;transform:scale(var(--wopm-view-scale,0));transform-origin:0 0;background:#fff}
.wopm-placeholder{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1rem;text-align:center;background:radial-gradient(ellipse at top,#eef3f6,#dae1e7);color:#293440}
.wopm-placeholder span{font-weight:600;font-size:clamp(1rem,2.5vw,1.6rem)}
.wopm-placeholder small{font-size:.85rem}
.wopm-device--desktop{padding-bottom:32px;margin-bottom:90px;border-radius:15px}
.wopm-device--desktop::before{content:"";position:absolute;top:100%;left:42%;width:16%;height:55px;background:linear-gradient(90deg,#939ba4,#dce0e5 45%,#929aa4);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);z-index:-1}
.wopm-device--desktop::after{content:"";position:absolute;top:calc(100% + 52px);left:32%;width:36%;height:10px;border-radius:50% 50% 3px 3px;background:linear-gradient(#e4e8ec,#8b939b);box-shadow:0 6px 9px #0002}
.wopm-device--laptop .wopm-screen{aspect-ratio:16/10}
.wopm-device--laptop{max-width:960px;width:94%;padding-bottom:15px;border-radius:16px 16px 5px 5px;margin-bottom:42px}
.wopm-device--laptop::after{content:"";position:absolute;top:100%;left:-3.2%;width:106.4%;height:17px;background:linear-gradient(90deg,#8d949c,#dbe0e5 8%,#b0b7be 45%,#e4e8eb 92%,#8d949c);border-bottom:5px solid #757d85;border-radius:2px 2px 50% 50%;box-shadow:0 8px 10px #0002}
.wopm-device--laptop::before{content:"";position:absolute;top:calc(100% + 1px);left:41%;width:18%;height:5px;border-radius:0 0 7px 7px;background:#6f7780;z-index:1}
.wopm-device--tablet{max-width:620px;padding:22px 16px;border-radius:32px;box-shadow:0 0 0 1px #aab1b9,0 18px 35px #1113,inset 0 0 0 3px #0b0d11}
.wopm-device--tablet .wopm-screen{aspect-ratio:3/4;border-radius:13px}
.wopm-device--tablet::after,.wopm-device--phone::after{content:"";position:absolute;right:-5px;top:18%;width:3px;height:44px;border-radius:0 3px 3px 0;background:#747c86}
.wopm-device--tablet .wopm-camera{top:8px}
.wopm-device--phone{max-width:310px;padding:10px;border-radius:42px;border-color:#929aa5;box-shadow:0 0 0 1px #343943,0 18px 35px #1113,inset 0 0 0 3px #080b10}
.wopm-device--phone .wopm-screen{aspect-ratio:390/844;border-radius:30px}
.wopm-device--phone .wopm-camera{top:16px;left:50%;transform:translateX(-50%);width:26%;height:15px;border-radius:15px;background:#080b10;box-shadow:inset -9px 0 0 #121722;z-index:2;pointer-events:none}
.wopm-device--phone::before{content:"";position:absolute;left:-5px;top:16%;width:3px;height:55px;border-radius:3px 0 0 3px;background:#747c86}
.wopm-device-options{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin:1rem 0;padding:0;background:transparent}
.wopm-portfolio .wopm-device-choice{font:inherit;font-size:.85rem;line-height:1.3;cursor:pointer;padding:.55rem .85rem;border:1px solid #b8bfc6;border-radius:7px;background:#f5f7f9;color:#202428}
.wopm-portfolio .wopm-device-choice[aria-pressed=true]{background:var(--wopm-accent,#225e72);border-color:transparent;color:#fff}
.wopm-viewer-controls{display:flex;justify-content:center;gap:1rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.wopm-viewer-controls [hidden]{display:none!important}
.wopm-viewer-help,.wopm-viewer-status{font-size:.85em;text-align:center;opacity:.85}
.wopm-viewer-status:empty{display:none}
.wopm-device .wopm-exit{display:none}
.wopm-device:fullscreen{width:100vw;max-width:none;height:100vh;padding:0;border:0;border-radius:0;margin:0;background:#fff;box-shadow:none}
.wopm-device:fullscreen::before,.wopm-device:fullscreen::after,.wopm-device:fullscreen .wopm-camera{display:none}
.wopm-device:fullscreen .wopm-screen{width:100%;max-width:none;height:100%;aspect-ratio:auto;border-radius:0}
.wopm-device:fullscreen .wopm-screen{background:#101318}
.wopm-device:fullscreen .wopm-exit{display:block;position:absolute;top:12px;right:12px;z-index:3;opacity:0;transition:opacity .15s;padding:.5rem .85rem;background:#17212e;color:white;box-shadow:0 2px 8px #0004}
.wopm-device:fullscreen .wopm-exit:hover,.wopm-device:fullscreen .wopm-exit:focus-visible{opacity:1}
@media(hover:none){.wopm-device:fullscreen .wopm-exit{opacity:1}}
.wopm-viewer--static .wopm-screen{overflow:auto}
.wopm-viewer--static .wopm-screen>.wopm-cover{height:auto;object-fit:contain}
.wopm-mobile-cover{display:none!important}
.wopm-has-mobile .wopm-device--phone .wopm-cover{display:none}
.wopm-has-mobile .wopm-device--phone .wopm-mobile-cover{display:block!important}
.wopm-screenshots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:2rem;margin:2rem 0}
.wopm-screenshots figure{margin:0}.wopm-screenshots img{display:block;width:100%;height:auto;border-radius:var(--wopm-radius)}
.wopm-screenshots figcaption{font-size:.9em;text-align:center;margin-top:.5rem}
.wopm-video{margin:1.5rem 0}.wopm-video iframe{max-width:100%;aspect-ratio:16/9;width:100%;height:auto}
.wopm-grid{display:grid;grid-template-columns:repeat(var(--wopm-columns,3),minmax(0,1fr));gap:1.5rem}
.wopm-card{border:1px solid #8884;border-radius:var(--wopm-radius);overflow:hidden;background:transparent;transition:transform .2s}
.wopm-card:hover{transform:translateY(-3px)}
.wopm-card-image{display:block;aspect-ratio:16/10;overflow:hidden;background:#8881}
.wopm-card-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wopm-card-body{padding:1.25rem}.wopm-card-body h3{font-size:1.2em;margin:0 0 .6rem}.wopm-card-body h3 a{color:inherit;text-decoration:none}.wopm-card-body p{font-size:.95em;margin:0}
.wopm-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.wopm-filters a{color:inherit;text-decoration:none;border:1px solid #8885;padding:.35rem .85rem;border-radius:999px}.wopm-filters a[aria-current]{background:var(--wopm-accent);color:white}
.wopm-pagination ul{display:flex;list-style:none;gap:1rem;padding:0;margin:2rem 0}
.wopm-portfolio .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:800px){.wopm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.wopm-grid{grid-template-columns:1fr}.wopm-reflections{gap:1rem}}
@media(prefers-reduced-motion:reduce){.wopm-card,.wopm-device:fullscreen .wopm-exit{transition:none}.wopm-card:hover{transform:none}}