.preview-netflow .netflow-screen {
        position: absolute;
        top: 23.3%; left: 4.2%; width: 91.6%; height: 52.8%;
        z-index: 1;
        overflow: hidden;
        container-type: inline-size;
      }
      .preview-netflow .netflow-screen img { width: 100%; height: 100%; object-fit: fill; }
      .preview-netflow .netflow-cleanup {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
      .preview-netflow .netflow-cleanup.is-ready { display: block; }
      .preview-netflow .netflow-marker {
        display: none;
        position: absolute;
        z-index: 3;
        top: 34.33014%;
        left: 41.85083%;
        width: .06906cqw;
        height: 19.85646%;
        background: #777;
        pointer-events: none;
      }
      .preview-netflow .netflow-cleanup.is-ready + .netflow-marker { display: block; }
      .preview-netflow .netflow-marker-label {
        position: absolute;
        left: 50%;
        color: #fff;
        font: 400 clamp(3px, .82873cqw, 6px)/1.25 Arial, sans-serif;
        white-space: nowrap;
        text-align: center;
      }
      .preview-netflow .netflow-marker-label--value { top: -1.79558cqw; left: .82873cqw; text-align: left; }
      .preview-netflow .netflow-marker-heading,
      .preview-netflow .netflow-marker-value { display: table; padding: .06906cqw .27624cqw; background: #343434; }
      .preview-netflow .netflow-marker-value { margin-top: .06906cqw; font-weight: 600; }
      .preview-netflow .netflow-marker-label--time { top: calc(100% + .27624cqw); transform: translateX(-50%); padding: 0 .13812cqw; background: #343434; }
      .preview-netflow .netflow-marker-dot { position: absolute; left: 50%; top: var(--point-y, 23.5%); width: .41436cqw; aspect-ratio: 1; border-radius: 50%; background: #343434; transform: translate(-50%, -50%); }
      .preview-netflow .netflow-marker-leader { position: absolute; left: 0; top: 0; width: .82873cqw; height: 100%; overflow: visible; }
      .preview-monitors .monitor-header-motion {
        display: block;
        visibility: hidden;
        position: absolute;
        top: 15.75%;
        left: 8.54%;
        width: 82.92%;
        height: 11.81646%;
        z-index: 2;
        pointer-events: none;
      }
      .preview-monitors .monitor-header-motion.is-orbit-ready { visibility: visible; }
      .preview-monitors .monitor-app:not([data-orbit-row]) { display: none; }
      .preview-monitors .monitor-header-band {
        position: absolute;
        inset: 0;
        overflow: hidden;
        container-type: inline-size;
        border-radius: .85745% .85745% 0 0 / 6.01506% 6.01506% 0 0;
        background: radial-gradient(70% 110% at 50% 98%, #372a44 5%, rgb(55 42 68 / 70%) 20%, rgb(55 42 68 / 0%) 45%, #372a44 110%), #493b57;
      }
      .preview-monitors .monitor-header-band::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(to bottom, rgb(35 26 48 / 10%), rgb(35 26 48 / 18%) 52%, rgb(35 26 48 / 48%));
      }
      .preview-monitors .monitor-header-band::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 0;
        opacity: .22;
        background-image: radial-gradient(#a898b4 .65px, transparent .65px);
        background-size: 6px 6px;
      }
      .preview-monitors .monitor-header-close {
        position: absolute;
        z-index: 3;
        top: 7%;
        padding: 5px 8px;
        border-radius: 5px;
        background: rgba(55, 42, 68, .92);
        color: #f4f0f8;
        font: 500 clamp(5px, .85vw, 11px)/1.2 Arial, sans-serif;
      }
      .preview-monitors .monitor-header-close { right: 1.5%; font-size: clamp(8px, 1.2vw, 16px); line-height: .8; }
      .preview-monitors .monitor-app {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        display: grid;
        place-items: center;
        width: min(var(--size), 5cqw);
        aspect-ratio: 1;
        border-radius: 24%;
        background: transparent;
        color: #fff;
        filter: drop-shadow(0 2px 3px rgba(20, 10, 30, .3));
        opacity: var(--opacity, .95);
        will-change: transform, opacity;
      }
      .preview-monitors .monitor-app svg { display: block; width: 100%; height: 100%; fill: none; stroke: none; }
      .preview-monitors .monitor-app.is-sprite {
        display: block;
        width: var(--sprite-size);
        background-color: transparent;
        background-size: 100% 100%;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
      }
      .preview-monitors .monitor-original-label,
      .preview-monitors .monitor-original-icons {
        position: absolute;
        z-index: 3;
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        pointer-events: none;
      }
      .preview-monitors .monitor-original-label {
        left: 9.25103%; top: 16.46077%; width: 12.33404%; height: 2.84306%;
        background-image: url("monitor-original-label.svg");
      }
      .preview-monitors .monitor-original-icons {
        left: 44.18575%; top: 23.13076%; width: 12.55308%; height: 9.84406%;
        background-image: url("monitor-center-icons.png");
      }

.hero-preview{--preview-frame:14px;position:relative;width:100%;height:100%;aspect-ratio:1;background:transparent;overflow:visible}
.hero-preview>img{position:relative;z-index:1;width:100%;height:100%;object-fit:fill;clip-path:inset(15.75% 8.54%)}
.hero-preview::after{content:"";position:absolute;z-index:0;background:rgba(0,0,0,.2);pointer-events:none}
.hero-preview.preview-monitors::after{inset:calc(15.75% - var(--preview-frame)) calc(8.54% - var(--preview-frame))}
.hero-preview.preview-netflow::after{top:calc(23.3% - var(--preview-frame));right:calc(4.2% - var(--preview-frame));bottom:calc(23.9% - var(--preview-frame));left:calc(4.2% - var(--preview-frame))}
[data-project-page="monitors"] .hero-art>.image-frame,[data-project-page="netflow"] .hero-art>.image-frame{inset:0;padding:0;background:transparent;translate:0 0}
@media(max-width:600px){.hero-preview{--preview-frame:10px}}
@media(prefers-reduced-motion:reduce){.preview-netflow .netflow-cleanup,.preview-netflow .netflow-marker{display:none!important}}