/*!
 * Viewnamic site – feature visuals.
 * Light HTML/CSS illustrations from templates/partials/feature-visuals/*.php
 * (features, feature detail pages, use cases). No images. A small script
 * (assets/js/features.js) starts the motion when a figure scrolls into view, pauses it
 * while the figure is off screen and adds a pause control.
 *
 * How they scale: every figure is an inline-size container. Shapes are sized in
 * container units (cqi), so a drawing scales like an SVG and never shifts the layout
 * (the stage reserves its height with aspect-ratio). Translatable labels use clamped
 * font sizes, so they stay legible from 320px phones to wide desktops.
 * Motion is decorative: calm loops with resting moments that only run while the figure
 * is visible, can be paused by the reader and only exist with
 * prefers-reduced-motion: no-preference (see the Motion section at the end).
 * Brand colours come from the --vnm-* tokens (the branding visual adds sample customer
 * colours); the brand red (--vnm-accent) marks small graphic details only.
 */

/* ==========================================================================
   Figure, stage and caption
   ========================================================================== */
.vn-fx-visual {
    --fxv-ink: var(--vnm-secondary);
    --fxv-teal: var(--vnm-primary);
    --fxv-teal-strong: var(--vnm-primary-strong);
    --fxv-mint: var(--vnm-bg-secondary);
    --fxv-tint: var(--vnm-bg-tint);
    --fxv-paper: var(--vnm-bg);
    --fxv-dark: var(--vnm-bg-dark);
    --fxv-accent: var(--vnm-accent);
    --fxv-text-line: color-mix(in srgb, var(--vnm-text) 20%, transparent);
    --fxv-hair: color-mix(in srgb, var(--vnm-secondary) 14%, transparent);
    --fxv-drop: 0 1.4cqi 3.6cqi color-mix(in srgb, var(--vnm-secondary) 16%, transparent);
    --fxv-drop-sm: 0 .5cqi 1.4cqi color-mix(in srgb, var(--vnm-text-strong) 14%, transparent);
    --fxv-label: clamp(.625rem, 2.1cqi, .8125rem);
    --fxv-label-sm: clamp(.5625rem, 1.7cqi, .71875rem);
    --fxv-ease: cubic-bezier(.45, 0, .25, 1); /* calm ease-in-out for the loops */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    margin: 0;
    container-type: inline-size;
}

.vn-fxv-stage {
    position: relative;
    grid-area: 1 / 1;
    min-width: 0;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--vnm-border);
    border-radius: clamp(14px, 4cqi, var(--vnm-radius-xl));
    background:
        radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--vnm-primary) 13%, transparent) 0 21cqi, transparent calc(21cqi + 1px)),
        radial-gradient(circle at 2% 100%, color-mix(in srgb, var(--vnm-accent) 7%, transparent) 0 19cqi, transparent calc(19cqi + 1px)),
        linear-gradient(150deg, var(--vnm-bg-tint) 0%, var(--vnm-bg-secondary) 100%);
    box-shadow: var(--vnm-shadow-md);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-body);
    font-size: var(--fxv-label);
    line-height: 1.25;
    text-align: left;
    -webkit-user-select: none;
    user-select: none;
}
.vn-fx-visual--plain .vn-fxv-stage {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}
.vn-fxv-stage :is(i, b, em) { font-style: normal; }
.vn-fxv-stage svg { flex: none; max-width: none; }

.vn-fxv-caption {
    margin: .85rem auto 0;
    max-width: 46ch;
    color: var(--vnm-text-muted);
    font-size: var(--vnm-fs-sm);
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
}

/* Pause control (added by features.js to animated figures, outside the aria-hidden stage):
   shares the stage's grid cell, so it sits in the stage's bottom-right corner whatever the
   caption below does. Pressed = the animations of all feature visuals are paused. */
.vn-fxv-toggle {
    position: relative;
    z-index: 8;
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: clamp(.375rem, 1.8cqi, .75rem);
    padding: 0;
    border: 1px solid var(--vnm-border-strong);
    border-radius: 50%;
    background: color-mix(in srgb, var(--vnm-bg) 94%, transparent);
    box-shadow: var(--vnm-shadow-sm);
    color: var(--vnm-secondary);
    cursor: pointer;
    transition: background-color var(--vnm-duration) ease, border-color var(--vnm-duration) ease;
}
.vn-fxv-toggle:hover { border-color: var(--vnm-secondary); background: var(--vnm-bg-secondary); }
.vn-fxv-toggle:focus-visible { outline: none; box-shadow: var(--vnm-focus); }
.vn-fxv-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vn-fxv-toggle .vn-fxv-toggle__play { fill: currentColor; stroke-width: 1.6; }
.vn-fxv-toggle[aria-pressed="true"] .vn-fxv-toggle__pause,
.vn-fxv-toggle:not([aria-pressed="true"]) .vn-fxv-toggle__play { display: none; }
/* Visuals whose bottom-right corner is busy get the control in the top-right corner */
:is(.vn-fx-visual--embed, .vn-fx-visual--magazine-scroll, .vn-fx-visual--presentation, .vn-fx-visual--secure-sharing) > .vn-fxv-toggle { align-self: start; }

/* ==========================================================================
   Building blocks
   ========================================================================== */
.vn-fxv-center { display: grid; place-items: center; }

/* Browser-like window */
.vn-fxv-window {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--fxv-hair);
    border-radius: 2.2cqi;
    background: var(--fxv-paper);
    box-shadow: var(--fxv-drop);
}
.vn-fxv-bar {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.2cqi;
    height: 6.4cqi;
    padding-inline: 2cqi;
    border-bottom: 1px solid var(--fxv-hair);
    background: var(--fxv-tint);
}
.vn-fxv-dots { flex: none; display: flex; gap: .8cqi; }
.vn-fxv-dots i { width: 1.2cqi; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--fxv-ink) 22%, transparent); }
.vn-fxv-dots i:first-child { background: var(--fxv-accent); }
.vn-fxv-dots i:last-child { background: var(--fxv-teal); }
.vn-fxv-bar__title {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    min-width: 0;
    margin-inline: auto;
    padding: .28em .9em;
    border-radius: var(--vnm-radius-pill);
    background: var(--fxv-mint);
    color: var(--fxv-ink);
    font-size: var(--fxv-label-sm);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vn-fxv-bar__title svg { width: 1.1em; height: 1.1em; }
.vn-fxv-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
    margin: 1.4cqi;
    overflow: hidden;
    border-radius: 1.2cqi;
    background: var(--fxv-mint);
}
.vn-fxv-pager {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4cqi;
    height: 4.4cqi;
    margin-top: -.6cqi;
    color: var(--fxv-ink);
    font-size: var(--fxv-label-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.vn-fxv-pager svg { width: 1.7cqi; height: 1.7cqi; }
.vn-fxv-flipx { transform: scaleX(-1); }

/* Paper, magazine spread and page content */
.vn-fxv-page {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1cqi;
    padding: 2.4cqi;
    overflow: hidden;
    border-radius: .3cqi;
    background: var(--fxv-paper);
    box-shadow: var(--fxv-drop-sm);
}
.vn-fxv-spread {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 45cqi;
    aspect-ratio: 1.42;
    filter: drop-shadow(0 .6cqi .9cqi color-mix(in srgb, var(--vnm-text-strong) 16%, transparent));
}
.vn-fxv-spread::before { /* page edges of the following sheets */
    content: "";
    position: absolute;
    inset: 1.2% -.9% -2.4%;
    z-index: -1;
    border: 1px solid var(--fxv-hair);
    border-radius: .8cqi;
    background: var(--fxv-paper);
}
.vn-fxv-spread::after { /* spine shading */
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    z-index: 2;
    width: 9%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vnm-text) 15%, transparent) 50%, transparent);
    pointer-events: none;
}
.vn-fxv-leaf {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1cqi;
    min-width: 0;
    padding: 2.2cqi 2cqi;
    overflow: hidden;
    background: var(--fxv-paper);
}
.vn-fxv-leaf:first-child {
    border-radius: .8cqi 0 0 .8cqi;
    background: linear-gradient(90deg, var(--fxv-paper) 80%, color-mix(in srgb, var(--vnm-text) 6%, var(--fxv-paper)));
    transform: perspective(90cqi) rotateY(3deg);
    transform-origin: right center;
}
.vn-fxv-leaf:nth-child(2) {
    border-radius: 0 .8cqi .8cqi 0;
    background: linear-gradient(270deg, var(--fxv-paper) 80%, color-mix(in srgb, var(--vnm-text) 6%, var(--fxv-paper)));
    transform: perspective(90cqi) rotateY(-3deg);
    transform-origin: left center;
}
.vn-fxv-leaf--curl::after { /* lifted page corner */
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 4.6cqi;
    aspect-ratio: 1;
    border-top-left-radius: 1.2cqi;
    background: linear-gradient(315deg, var(--fxv-mint) 0 47%, color-mix(in srgb, var(--vnm-text) 12%, var(--fxv-paper)) 50%, var(--fxv-paper) 78%);
    box-shadow: -.3cqi -.3cqi .8cqi color-mix(in srgb, var(--vnm-text-strong) 10%, transparent);
    transform-origin: 100% 100%;
}
.vn-fxv-kicker {
    display: block;
    overflow: hidden;
    color: var(--fxv-ink);
    font-family: var(--vnm-font-heading);
    font-size: 1cqi;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}
.vn-fxv-headline {
    display: block;
    color: var(--fxv-ink);
    font-family: var(--vnm-font-heading);
    font-size: 2.2cqi;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.08;
}
.vn-fxv-headline--xl { font-size: 3cqi; }
.vn-fxv-quote {
    display: block;
    margin-block: .6cqi;
    padding-left: 1.4cqi;
    border-left: .45cqi solid var(--fxv-teal);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-heading);
    font-size: 1.7cqi;
    font-style: italic;
    font-weight: 600;
    line-height: 1.25;
}
.vn-fxv-rule { display: block; width: 5cqi; height: .5cqi; border-radius: 1cqi; background: var(--fxv-teal); }
.vn-fxv-lines { display: flex; flex-direction: column; gap: .7cqi; min-width: 0; }
.vn-fxv-lines i { display: block; height: .55cqi; border-radius: 1cqi; background: var(--fxv-text-line); }
.vn-fxv-lines i:last-child:not(:first-child) { width: 68%; }
.vn-fxv-lines--bold { flex: 1; gap: 1cqi; }
.vn-fxv-lines--bold i { height: .85cqi; background: color-mix(in srgb, var(--vnm-text) 30%, transparent); }
.vn-fxv-lines--light i { background: color-mix(in srgb, var(--fxv-paper) 55%, transparent); }
.vn-fxv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqi; }

/* Picture placeholders */
.vn-fxv-photo {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: .6cqi;
    background: linear-gradient(165deg, var(--vnm-secondary) 0%, var(--vnm-primary) 100%);
}
.vn-fxv-photo::before { /* sun */
    content: "";
    position: absolute;
    top: 16%;
    right: 14%;
    width: 17%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fxv-mint) 85%, transparent);
}
.vn-fxv-photo::after { /* hills */
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 58%;
    background: color-mix(in srgb, var(--fxv-mint) 55%, transparent);
    clip-path: polygon(0 62%, 24% 18%, 46% 58%, 68% 26%, 100% 70%, 100% 100%, 0 100%);
}
.vn-fxv-photo--city::after { /* buildings instead of hills */
    inset: 0;
    height: auto;
    clip-path: none;
    background:
        linear-gradient(var(--vnm-primary) 0 0) 0 100% / 100% 12% no-repeat,
        linear-gradient(var(--fxv-paper) 0 0) 14% 88% / 24% 56% no-repeat,
        linear-gradient(color-mix(in srgb, var(--fxv-mint) 75%, transparent) 0 0) 43% 88% / 15% 36% no-repeat,
        linear-gradient(var(--vnm-secondary-dark) 0 0) 70% 88% / 21% 66% no-repeat;
}
.vn-fxv-scene-house,
.vn-fxv-scene-room { position: relative; display: block; overflow: hidden; }
.vn-fxv-scene-house { background: linear-gradient(180deg, color-mix(in srgb, var(--fxv-mint) 80%, var(--fxv-paper)) 0 76%, var(--vnm-primary) 76%); }
.vn-fxv-scene-house::after { content: ""; position: absolute; top: 12%; right: 10%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--vnm-primary) 40%, var(--fxv-paper)); }
.vn-fxv-scene-house i { position: absolute; display: block; }
.vn-fxv-scene-house i:nth-child(1) { /* house body with windows */
    left: 20%; bottom: 24%; width: 42%; height: 38%;
    background:
        linear-gradient(var(--vnm-secondary) 0 0) 18% 42% / 20% 38% no-repeat,
        linear-gradient(var(--vnm-secondary) 0 0) 50% 100% / 18% 56% no-repeat,
        linear-gradient(var(--vnm-secondary) 0 0) 82% 42% / 20% 38% no-repeat,
        var(--fxv-paper);
}
.vn-fxv-scene-house i:nth-child(2) { /* roof */
    left: 16%; bottom: 61%; width: 50%; height: 22%;
    background: var(--vnm-secondary);
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.vn-fxv-scene-house i:nth-child(3) { /* garage wing */
    left: 62%; bottom: 24%; width: 21%; height: 24%;
    background: linear-gradient(var(--fxv-mint) 0 0) 50% 100% / 64% 60% no-repeat, var(--vnm-secondary-dark);
}
.vn-fxv-scene-room { background: linear-gradient(180deg, var(--fxv-mint) 0 70%, color-mix(in srgb, var(--vnm-secondary) 22%, var(--fxv-paper)) 70%); }
.vn-fxv-scene-room i { position: absolute; display: block; }
.vn-fxv-scene-room i:nth-child(1) { /* window */
    left: 8%; top: 12%; width: 30%; height: 50%;
    border: .45cqi solid var(--fxv-paper);
    background: linear-gradient(var(--fxv-paper) 0 0) 50% 0 / .45cqi 100% no-repeat, linear-gradient(160deg, var(--vnm-primary), var(--vnm-secondary));
}
.vn-fxv-scene-room i:nth-child(2) { /* sofa */
    left: 45%; bottom: 18%; width: 40%; height: 24%;
    border-radius: .9cqi .9cqi .4cqi .4cqi;
    background: linear-gradient(var(--vnm-primary) 0 0) 50% 100% / 100% 46% no-repeat, var(--vnm-secondary);
}
.vn-fxv-scene-room i:nth-child(3) { /* floor lamp */
    right: 6%; bottom: 18%; width: .5cqi; height: 44%;
    background: var(--vnm-secondary);
}
.vn-fxv-scene-room i:nth-child(3)::before {
    content: "";
    position: absolute;
    top: -2%;
    left: 50%;
    width: 4cqi;
    height: 3cqi;
    transform: translateX(-50%);
    background: var(--vnm-secondary);
    clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
}

/* Video, play button and progress */
.vn-fxv-video { position: relative; display: block; overflow: hidden; border-radius: .8cqi; }
.vn-fxv-video .vn-fxv-photo { aspect-ratio: 16 / 9; border-radius: 0; }
.vn-fxv-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--vnm-bg-dark) 50%, transparent));
    pointer-events: none;
}
.vn-fxv-play {
    --s: 6.4cqi;
    position: absolute;
    top: 46%;
    left: 50%;
    z-index: 1;
    width: var(--s);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--fxv-paper);
    box-shadow: 0 .5cqi 1.6cqi color-mix(in srgb, var(--vnm-bg-dark) 30%, transparent);
    transform: translate(-50%, -50%);
}
.vn-fxv-play::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 34%;
    height: 38%;
    margin: auto;
    background: var(--fxv-ink);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translateX(12%);
}
.vn-fxv-progress {
    position: absolute;
    right: 5%;
    bottom: 8%;
    left: 5%;
    z-index: 1;
    height: .5cqi;
    overflow: hidden;
    border-radius: 1cqi;
    background: color-mix(in srgb, var(--fxv-paper) 40%, transparent);
}
.vn-fxv-progress i { display: block; height: 100%; background: var(--fxv-paper); transform: scaleX(.34); transform-origin: left center; }
.vn-fxv-video__time {
    position: absolute;
    right: 5%;
    bottom: 13%;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .5cqi;
    color: var(--fxv-paper);
    font-size: 1.1cqi;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 .4cqi color-mix(in srgb, var(--vnm-bg-dark) 60%, transparent);
}
/* "Playing" dot: the element fades in once, its ::before pulses (one opacity animation per
   element, so both run on the compositor) */
.vn-fxv-live { width: .8cqi; aspect-ratio: 1; opacity: 0; }
.vn-fxv-live::before { content: ""; display: block; height: 100%; border-radius: 50%; background: var(--fxv-accent); }
.vn-fxv-marked { outline: .32cqi dashed var(--fxv-teal); outline-offset: .45cqi; }

/* Scene of a playing video (city photo): clouds, birds and a tram. Each object is drawn at
   the left or right outside a layer as wide as the video, so moving the layer with
   translateX(%) carries it across the picture and out again (compositor-only). */
.vn-fxv-video--playing .vn-fxv-photo { transform-origin: 50% 88%; }
.vn-fxv-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vn-fxv-scene > i { position: absolute; left: 0; display: block; width: 100%; }
.vn-fxv-cloud { top: 7%; height: 11%; opacity: .85; transform: translateX(38%); }
.vn-fxv-cloud::before,
.vn-fxv-cloud::after { content: ""; position: absolute; bottom: 0; background: var(--fxv-paper); }
.vn-fxv-cloud::before { left: -24%; width: 20%; height: 60%; border-radius: var(--vnm-radius-pill); }
.vn-fxv-cloud::after { left: -19.5%; height: 100%; aspect-ratio: 1; border-radius: 50%; }
.vn-fxv-cloud--2 { top: 19%; height: 7%; opacity: .6; transform: translateX(86%); }
.vn-fxv-cloud--2::before { left: -16%; width: 13%; }
.vn-fxv-cloud--2::after { left: -12.5%; }
.vn-fxv-birds { top: 25%; height: 9%; }
.vn-fxv-birds svg { position: absolute; top: 0; right: -14%; width: 11%; height: 100%; overflow: visible; fill: none; stroke: color-mix(in srgb, var(--fxv-paper) 85%, transparent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vn-fxv-tram { bottom: 10%; height: 15%; transform: translateX(72%); }
.vn-fxv-tram::before { /* car with four windows and a teal stripe */
    content: "";
    position: absolute;
    bottom: 0;
    left: -30%;
    width: 27%;
    height: 100%;
    border-radius: 18% 18% 6% 6% / 34% 34% 10% 10%;
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--vnm-secondary-dark) 80%, transparent) 0 19%, transparent 19% 27%) 50% 28% / 84% 34% no-repeat,
        linear-gradient(var(--vnm-primary) 0 0) 0 82% / 100% 12% no-repeat,
        var(--fxv-paper);
}

/* Click ripple of a cursor (positioned per visual at the cursor tip) */
.vn-fxv-ripple {
    position: absolute;
    z-index: 5;
    width: 4.2cqi;
    aspect-ratio: 1;
    border: .4cqi solid var(--fxv-accent);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.3);
    pointer-events: none;
}

/* Floating chips, cards, cursor, keys, tags */
.vn-fxv-chip {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    max-width: 100%;
    padding: .45em .85em;
    border: 1px solid var(--fxv-hair);
    border-radius: var(--vnm-radius-pill);
    background: var(--fxv-paper);
    box-shadow: 0 .8cqi 2.2cqi color-mix(in srgb, var(--vnm-secondary) 16%, transparent);
    color: var(--fxv-ink);
    font-size: var(--fxv-label);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.vn-fxv-chip svg { width: 1.15em; height: 1.15em; }
.vn-fxv-chip--sm { padding: .35em .7em; font-size: var(--fxv-label-sm); }
.vn-fxv-chip--solid { border-color: transparent; background: var(--fxv-teal-strong); color: var(--fxv-paper); }
.vn-fxv-chip--mint { border-color: transparent; background: var(--fxv-mint); box-shadow: none; }
.vn-fxv-chip--accent svg { color: var(--fxv-accent); }

.vn-fxv-card {
    position: absolute;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: .9cqi;
    padding: 1.8cqi;
    border: 1px solid var(--fxv-hair);
    border-radius: 2cqi;
    background: var(--fxv-paper);
    box-shadow: var(--fxv-drop);
}
.vn-fxv-card__title {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    min-width: 0;
    color: var(--fxv-ink);
    font-family: var(--vnm-font-heading);
    font-size: var(--fxv-label);
    font-weight: 700;
    line-height: 1.2;
}
.vn-fxv-card__meta {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    color: var(--vnm-text-muted);
    font-size: var(--fxv-label-sm);
    line-height: 1.3;
}
.vn-fxv-card :is(.vn-fxv-card__title, .vn-fxv-card__meta) svg { width: 1.15em; height: 1.15em; }
.vn-fxv-badge {
    padding: .5cqi .9cqi;
    border-radius: .7cqi;
    background: var(--fxv-paper);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-heading);
    font-size: max(.5rem, 1.5cqi);
    font-weight: 700;
    line-height: 1;
}
.vn-fxv-cursor {
    position: absolute;
    z-index: 6;
    width: 4.4cqi;
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    fill: var(--fxv-paper);
    stroke: var(--fxv-ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
    filter: drop-shadow(0 .3cqi .5cqi color-mix(in srgb, var(--vnm-text-strong) 28%, transparent));
}
.vn-fxv-key {
    display: grid;
    place-items: center;
    width: 4.4cqi;
    aspect-ratio: 1;
    border: 1px solid var(--fxv-hair);
    border-radius: .8cqi;
    background: var(--fxv-paper);
    box-shadow: 0 .35cqi 0 color-mix(in srgb, var(--fxv-ink) 18%, transparent);
    color: var(--fxv-ink);
    font-size: var(--fxv-label);
    font-weight: 700;
    line-height: 1;
}
.vn-fxv-tag {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 3.6cqi;
    height: 2.5cqi;
    padding: 0 .6cqi;
    border-radius: .6cqi;
    background: var(--fxv-mint);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-mono);
    font-size: max(.4375rem, 1.3cqi);
    font-weight: 700;
    line-height: 1;
}
.vn-fxv-tag svg { width: 1.4cqi; height: 1.4cqi; fill: currentColor; }

/* PDF file icon */
.vn-fxv-file {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: .7cqi;
    width: 10cqi;
    aspect-ratio: .78;
    padding: 3.4cqi 1.3cqi 1.3cqi;
    border: 1px solid var(--fxv-hair);
    border-radius: .9cqi;
    background: var(--fxv-paper);
    box-shadow: var(--fxv-drop);
}
.vn-fxv-file::before { /* folded corner */
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 32%;
    aspect-ratio: 1;
    border-radius: 0 .9cqi 0 .5cqi;
    background: linear-gradient(225deg, var(--fxv-tint) 0 50%, color-mix(in srgb, var(--fxv-ink) 14%, var(--fxv-mint)) 50%);
}
.vn-fxv-file b {
    align-self: flex-start;
    padding: .45cqi .7cqi;
    border-radius: .5cqi;
    background: var(--fxv-ink);
    color: var(--fxv-paper);
    font-family: var(--vnm-font-heading);
    font-size: max(.5rem, 1.7cqi);
    font-weight: 700;
    line-height: 1;
}
.vn-fxv-file i { display: block; height: .55cqi; border-radius: 1cqi; background: var(--fxv-text-line); }
.vn-fxv-file i:last-child { width: 70%; }

/* Scrollbar */
.vn-fxv-scrollbar {
    position: absolute;
    top: 5%;
    right: 2.6%;
    bottom: 5%;
    z-index: 2;
    width: .8cqi;
    border-radius: 1cqi;
    background: color-mix(in srgb, var(--fxv-ink) 11%, transparent);
}
.vn-fxv-scrollbar i { display: block; height: 24%; border-radius: inherit; background: var(--fxv-teal); transform: translateY(30%); }

/* Supported formats row */
.vn-fxv-formats {
    position: absolute;
    right: 5%;
    bottom: 3.5%;
    left: 5%;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1cqi;
}
.vn-fxv-formats span {
    padding: .32em .75em;
    border: 1px solid var(--fxv-hair);
    border-radius: var(--vnm-radius-pill);
    background: var(--fxv-paper);
    box-shadow: var(--fxv-drop-sm);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-mono);
    font-size: var(--fxv-label-sm);
    font-weight: 600;
    line-height: 1.2;
}

/* Rotating CSS cube (3D model) */
.vn-fxv-cube {
    --cube: 11cqi;
    position: relative;
    display: block;
    width: var(--cube);
    aspect-ratio: 1;
    transform: rotateX(-22deg) rotateY(-36deg);
    transform-style: preserve-3d;
}
.vn-fxv-cube i {
    position: absolute;
    inset: 0;
    border: 1px solid color-mix(in srgb, var(--fxv-paper) 45%, transparent);
    background-image:
        linear-gradient(color-mix(in srgb, var(--fxv-paper) 26%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--fxv-paper) 26%, transparent) 1px, transparent 1px);
    background-size: 33.4% 33.4%;
    backface-visibility: hidden;
}
.vn-fxv-cube i:nth-child(1) { background-color: var(--vnm-primary); transform: translateZ(calc(var(--cube) / 2)); }
.vn-fxv-cube i:nth-child(2) { background-color: var(--vnm-secondary); transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.vn-fxv-cube i:nth-child(3) { background-color: var(--vnm-secondary); transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.vn-fxv-cube i:nth-child(4) { background-color: var(--vnm-primary-strong); transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.vn-fxv-cube i:nth-child(5) { background-color: color-mix(in srgb, var(--vnm-primary) 55%, var(--fxv-paper)); transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); }
.vn-fxv-cube i:nth-child(6) { background-color: var(--vnm-secondary-dark); transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); }
.vn-fxv-3d-area {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1cqi;
    background:
        radial-gradient(ellipse 30% 9% at 50% 80%, color-mix(in srgb, var(--vnm-secondary) 16%, transparent) 0 70%, transparent 100%),
        var(--fxv-mint);
    perspective: 60cqi;
}

/* Generic slide (presentation) */
.vn-fxv-slide {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: 1cqi;
    background: linear-gradient(150deg, var(--vnm-secondary) 0%, var(--vnm-bg-dark) 100%);
    color: var(--fxv-paper);
}
.vn-fxv-slide .vn-fxv-headline { color: var(--fxv-paper); }
.vn-fxv-slide .vn-fxv-kicker { color: color-mix(in srgb, var(--fxv-paper) 75%, transparent); }
.vn-fxv-slide .vn-fxv-lines i { background: color-mix(in srgb, var(--fxv-paper) 38%, transparent); }

/* Document covers */
.vn-fxv-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .8cqi;
    aspect-ratio: .74;
    padding: 1.6cqi;
    overflow: hidden;
    border-radius: .4cqi;
    box-shadow: var(--fxv-drop-sm);
}
.vn-fxv-cover .vn-fxv-kicker { font-size: .8cqi; }
.vn-fxv-cover .vn-fxv-headline { font-size: 1.75cqi; }
.vn-fxv-cover--teal { background: var(--vnm-secondary); }
.vn-fxv-cover--dark { background: var(--vnm-text-strong); }
.vn-fxv-cover--mint { background: var(--fxv-mint); }
.vn-fxv-cover--paper { border: 1px solid var(--fxv-hair); background: var(--fxv-paper); }
.vn-fxv-cover:is(.vn-fxv-cover--teal, .vn-fxv-cover--dark) :is(.vn-fxv-kicker, .vn-fxv-headline) { color: var(--fxv-paper); }
.vn-fxv-cover__art { position: absolute; right: -14%; bottom: -12%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--vnm-primary); box-shadow: inset -2cqi -1cqi 0 color-mix(in srgb, var(--vnm-secondary-dark) 35%, transparent); }
.vn-fxv-cover__lamp { position: absolute; bottom: 12%; left: 50%; width: 46%; aspect-ratio: .9; transform: translateX(-50%); }
.vn-fxv-cover__lamp::before { /* shade */
    content: "";
    position: absolute;
    top: 0;
    left: 14%;
    width: 72%;
    height: 34%;
    background: var(--fxv-mint);
    clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
}
.vn-fxv-cover__lamp::after { /* light */
    content: "";
    position: absolute;
    top: 34%;
    left: 0;
    width: 100%;
    height: 66%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--vnm-primary) 55%, transparent), transparent);
    clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.vn-fxv-cover__tiles { position: absolute; bottom: 14%; left: 18%; width: 30%; aspect-ratio: 1; border-radius: .3cqi; background: var(--vnm-primary); box-shadow: 3.2cqi -1.2cqi 0 var(--vnm-secondary), 1.6cqi 1.8cqi 0 color-mix(in srgb, var(--vnm-primary) 35%, var(--fxv-paper)); }

/* Stylised lounge chair (click dummy, covers) */
.vn-fxv-chair { --c: var(--vnm-primary); position: relative; display: block; width: 17cqi; aspect-ratio: 1; }
.vn-fxv-chair i { position: absolute; display: block; }
.vn-fxv-chair i:nth-child(1) { /* backrest */
    top: 6%; left: 25%; width: 50%; height: 50%;
    border-radius: 24% 24% 12% 12%;
    background: linear-gradient(90deg, var(--c) 68%, color-mix(in srgb, var(--c) 80%, var(--vnm-text-strong)) 68%);
}
.vn-fxv-chair i:nth-child(2) { /* seat */
    top: 49%; left: 13%; width: 74%; height: 19%;
    border-radius: 34% / 60%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, var(--fxv-paper)) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 76%, var(--vnm-text-strong)) 100%);
}
.vn-fxv-chair i:nth-child(3),
.vn-fxv-chair i:nth-child(4) { /* legs */
    top: 64%; width: 5%; height: 31%;
    border-radius: 1cqi;
    background: color-mix(in srgb, var(--vnm-text-strong) 82%, transparent);
}
.vn-fxv-chair i:nth-child(3) { left: 22%; transform: rotate(9deg); }
.vn-fxv-chair i:nth-child(4) { left: 73%; transform: rotate(-9deg); }
.vn-fxv-chair::after { content: ""; position: absolute; right: 12%; bottom: 0; left: 12%; height: 5%; border-radius: 50%; background: color-mix(in srgb, var(--vnm-secondary) 14%, transparent); }

/* ==========================================================================
   magazine-scroll
   ========================================================================== */
.vn-fxv-ms-file { top: 4%; left: 50%; transform: translateX(-50%); }
.vn-fxv-ms-branch {
    position: absolute;
    top: 26%;
    right: 27%;
    left: 27%;
    height: 8.5%;
    border: .42cqi solid var(--fxv-teal);
    border-bottom: 0;
    border-radius: 2.4cqi 2.4cqi 0 0;
}
.vn-fxv-ms-branch::before { /* stem from the file */
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: .42cqi;
    height: 3.6cqi;
    background: var(--fxv-teal);
    transform: translateX(-50%);
}
.vn-fxv-ms-branch i { /* arrow heads */
    position: absolute;
    bottom: .2cqi;
    width: 1.8cqi;
    aspect-ratio: 1;
    border-right: .42cqi solid var(--fxv-teal);
    border-bottom: .42cqi solid var(--fxv-teal);
    transform: rotate(45deg);
}
.vn-fxv-ms-branch i:first-child { left: calc(-.21cqi - .9cqi - .21cqi); }
.vn-fxv-ms-branch i:last-child { right: calc(-.21cqi - .9cqi - .21cqi); }
.vn-fxv-ms-source { position: absolute; top: 26%; left: 50%; z-index: 3; transform: translate(-50%, -50%); }
.vn-fxv-ms-mag { top: 36%; left: 4%; width: 54%; height: 60%; }
.vn-fxv-ms-scroll { top: 36%; right: 4%; width: 34%; height: 60%; }
.vn-fxv-ms-mag .vn-fxv-spread { width: 46cqi; }
.vn-fxv-ms-mag .vn-fxv-leaf { gap: .9cqi; padding: 1.8cqi 1.7cqi; }
.vn-fxv-ms-pages {
    position: absolute;
    top: 5%;
    right: 15%;
    left: 9%;
    display: flex;
    flex-direction: column;
    gap: 2.4cqi;
}
.vn-fxv-ms-pages .vn-fxv-page { flex: none; aspect-ratio: .74; gap: .9cqi; padding: 1.8cqi; }

/* ==========================================================================
   video
   ========================================================================== */
.vn-fxv-vd-options { position: absolute; top: 4%; right: 5%; z-index: 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1cqi; max-width: 70%; }
.vn-fxv-vd-window { top: 14%; left: 5%; width: 90%; height: 72%; }
.vn-fxv-vd-window .vn-fxv-spread { width: 76cqi; aspect-ratio: 1.72; }
.vn-fxv-vd-window .vn-fxv-leaf { gap: 1.2cqi; padding: 2.8cqi 3cqi; }
.vn-fxv-vd-window .vn-fxv-video { margin-bottom: .6cqi; }

/* ==========================================================================
   model-3d
   ========================================================================== */
.vn-fxv-3d-window { top: 7%; left: 4%; width: 64%; height: 86%; }
.vn-fxv-3d-page { position: absolute; top: 5%; right: 13%; bottom: -12%; left: 7%; gap: 1.3cqi; padding: 3cqi; }
.vn-fxv-3d-area { margin-block: .6cqi; }
.vn-fxv-3d-orbit {
    position: absolute;
    top: 56%;
    left: 26%;
    width: 48%;
    height: 24%;
    border: .32cqi solid color-mix(in srgb, var(--fxv-ink) 32%, transparent);
    border-top-color: transparent;
    border-radius: 50%;
    transform: rotate(-5deg);
}
.vn-fxv-3d-orbit::after { /* arrow tip */
    content: "";
    position: absolute;
    right: 9%;
    bottom: 12%;
    width: 1.4cqi;
    aspect-ratio: 1;
    border-top: .32cqi solid color-mix(in srgb, var(--fxv-ink) 45%, transparent);
    border-right: .32cqi solid color-mix(in srgb, var(--fxv-ink) 45%, transparent);
    transform: rotate(40deg);
}
.vn-fxv-3d-hint { position: absolute; right: 3%; bottom: 6%; box-shadow: none; }
.vn-fxv-3d-card { top: 20%; right: 4%; width: 30%; }
.vn-fxv-3d-thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1.15;
    border-radius: 1.2cqi;
    background: var(--fxv-mint);
    perspective: 50cqi;
}
.vn-fxv-3d-thumb .vn-fxv-badge { position: absolute; top: 7%; left: 7%; background: var(--fxv-accent); color: var(--fxv-paper); }
.vn-fxv-cube--static { --cube: 8cqi; }
.vn-fxv-3d-cursor { top: 55%; left: 46%; }

/* ==========================================================================
   click-dummy
   ========================================================================== */
.vn-fxv-cd-window { top: 13%; left: 4%; width: 92%; height: 82%; }
.vn-fxv-cd-page {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 3.4cqi;
    width: 80cqi;
    height: 50cqi;
    padding: 3.2cqi;
}
.vn-fxv-cd-copy { display: flex; flex-direction: column; justify-content: center; gap: 1.4cqi; }
.vn-fxv-cd-product { display: flex; flex-direction: column; gap: 1.2cqi; min-width: 0; }
.vn-fxv-cd-hero {
    position: relative;
    flex: 1;
    border-radius: 1.2cqi;
    background: radial-gradient(ellipse 60% 70% at 50% 60%, var(--fxv-paper) 0%, var(--fxv-mint) 70%);
}
.vn-fxv-cd-screen { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.vn-fxv-cd-screen--1 { opacity: 1; }
.vn-fxv-cd-screen .vn-fxv-chair { width: 16cqi; }
.vn-fxv-cd-count { position: absolute; top: 5%; left: 4%; box-shadow: none; }
.vn-fxv-cd-label { color: var(--fxv-ink); font-size: var(--fxv-label-sm); font-weight: 500; white-space: nowrap; }
.vn-fxv-cd-swatches { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqi; }
.vn-fxv-cd-swatch {
    display: grid;
    place-items: center;
    aspect-ratio: 1.15;
    border: 1px dashed color-mix(in srgb, var(--fxv-accent) 60%, transparent);
    border-radius: 1cqi;
    background: var(--fxv-paper);
}
.vn-fxv-cd-swatch .vn-fxv-chair { width: 6.4cqi; }
:is(.vn-fxv-cd-screen--2, .vn-fxv-cd-swatch--2) .vn-fxv-chair { --c: var(--vnm-secondary); }
:is(.vn-fxv-cd-screen--3, .vn-fxv-cd-swatch--3) .vn-fxv-chair { --c: var(--vnm-accent); }
:is(.vn-fxv-cd-screen--4, .vn-fxv-cd-swatch--4) .vn-fxv-chair { --c: var(--vnm-text); }
.vn-fxv-cd-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: calc((100% - 3 * 1.4cqi) / 4);
    aspect-ratio: 1.15;
    border: .42cqi solid var(--fxv-teal);
    border-radius: 1cqi;
    box-shadow: 0 0 0 .7cqi color-mix(in srgb, var(--vnm-primary) 18%, transparent);
}
.vn-fxv-cd-ring b {
    position: absolute;
    top: -1.3cqi;
    right: -1.3cqi;
    display: grid;
    place-items: center;
    width: 2.8cqi;
    aspect-ratio: 1;
    border: .3cqi solid var(--fxv-paper);
    border-radius: 50%;
    background: var(--fxv-teal-strong);
    color: var(--fxv-paper);
}
.vn-fxv-cd-ring b svg { width: 1.6cqi; height: 1.6cqi; stroke-width: 3; }
.vn-fxv-cd-ring .vn-fxv-cursor { right: -1.8cqi; bottom: -2.6cqi; transform-origin: 21% 12.5%; }
.vn-fxv-cd-ring .vn-fxv-ripple { top: calc(100% - 1.25cqi); left: calc(100% - 1.68cqi); } /* cursor tip */
.vn-fxv-cd-tag { position: absolute; top: 3%; right: 5%; z-index: 5; }

/* ==========================================================================
   slideshow
   ========================================================================== */
.vn-fxv-ss-window { top: 5%; left: 5%; width: 70%; height: 90%; }
.vn-fxv-ss-page { position: absolute; top: 5%; bottom: -16%; left: 50%; width: 44cqi; gap: 1.3cqi; padding: 3cqi; transform: translateX(-52%); }
.vn-fxv-ss { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: .8cqi; margin-block: .5cqi; }
.vn-fxv-ss-track { display: flex; width: 400%; height: 100%; }
.vn-fxv-ss-slide { flex: 0 0 25%; height: 100%; border-radius: 0; aspect-ratio: auto; }
.vn-fxv-ss-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3.8cqi;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fxv-paper) 94%, transparent);
    box-shadow: var(--fxv-drop-sm);
    color: var(--fxv-ink);
    transform: translateY(-50%);
}
.vn-fxv-ss-arrow svg { width: 2cqi; height: 2cqi; stroke-width: 2.4; }
.vn-fxv-ss-arrow--prev { left: 3%; }
.vn-fxv-ss-arrow--next { right: 3%; }
.vn-fxv-ss-dots { position: absolute; bottom: 6%; left: 50%; z-index: 2; display: flex; gap: .3cqi; transform: translateX(-50%); }
/* Every dot reserves the active width; inactive dots are squeezed to a circle (scaleX), so the
   active dot can follow the slides with transform and opacity only. */
.vn-fxv-ss-dots i { width: 2.2cqi; height: 1cqi; border-radius: 50%; background: var(--fxv-paper); opacity: .6; transform: scaleX(.46); }
.vn-fxv-ss-dots i:first-child { opacity: 1; transform: none; }
.vn-fxv-ss-options { position: absolute; top: 24%; right: 3.5%; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 1.3cqi; }

/* ==========================================================================
   link-area
   ========================================================================== */
.vn-fxv-la-window { top: 6%; left: 4%; width: 92%; height: 74%; }
.vn-fxv-la-window .vn-fxv-spread { width: 80cqi; aspect-ratio: 1.68; }
.vn-fxv-la-window .vn-fxv-leaf { gap: 1.2cqi; padding: 2.8cqi 3cqi; }
.vn-fxv-la-leaf { overflow: visible; }
.vn-fxv-la-image { aspect-ratio: 16 / 10; border-radius: .6cqi; }
.vn-fxv-la-area {
    position: absolute;
    top: 18%;
    left: 15%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 60%;
    height: 50%;
    border: .34cqi dashed var(--fxv-teal-strong);
    border-radius: .4cqi;
    background: color-mix(in srgb, var(--vnm-primary) 12%, transparent);
    transform-origin: 0 0; /* drawn from the top-left corner (Motion) */
}
.vn-fxv-la-area > i {
    position: absolute;
    width: 1.5cqi;
    aspect-ratio: 1;
    border: .3cqi solid var(--fxv-teal-strong);
    border-radius: .2cqi;
    background: var(--fxv-paper);
}
.vn-fxv-la-area > i:nth-child(1) { top: -.95cqi; left: -.95cqi; }
.vn-fxv-la-area > i:nth-child(2) { top: -.95cqi; right: -.95cqi; }
.vn-fxv-la-area > i:nth-child(3) { bottom: -.95cqi; left: -.95cqi; }
.vn-fxv-la-area > i:nth-child(4) { right: -.95cqi; bottom: -.95cqi; }
.vn-fxv-la-cursor { top: calc(68% - .5cqi); left: calc(75% - .6cqi); transform-origin: 21% 12.5%; }
.vn-fxv-la-ripple { top: calc(68% + .05cqi); left: calc(75% + .32cqi); } /* cursor tip */
.vn-fxv-la-pop { top: 72%; left: 52%; max-width: 46%; gap: .6cqi; padding: 1.4cqi 1.8cqi; }
.vn-fxv-la-pop::before { /* pointer towards the link area */
    content: "";
    position: absolute;
    top: -1cqi;
    left: 14%;
    width: 2cqi;
    aspect-ratio: 1;
    border-top: 1px solid var(--fxv-hair);
    border-left: 1px solid var(--fxv-hair);
    background: var(--fxv-paper);
    transform: rotate(45deg);
}
.vn-fxv-la-url { display: inline-flex; align-items: center; gap: .45em; min-width: 0; color: var(--fxv-ink); font-size: var(--fxv-label); font-weight: 500; }
.vn-fxv-la-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-fxv-la-url svg { width: 1.15em; height: 1.15em; }

/* ==========================================================================
   presentation
   ========================================================================== */
.vn-fxv-pr-reader { top: 5%; left: 4%; width: 50%; height: 40%; }
.vn-fxv-pr-reader .vn-fxv-bar__title { margin-inline: auto 0; }
.vn-fxv-pr-button {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 4.4cqi;
    height: 4.2cqi;
    border-radius: .8cqi;
    background: var(--fxv-teal-strong);
    box-shadow: 0 0 0 .6cqi color-mix(in srgb, var(--vnm-primary) 22%, transparent);
    color: var(--fxv-paper);
}
.vn-fxv-pr-button svg { width: 2.4cqi; height: 2.4cqi; stroke-width: 2.2; }
.vn-fxv-pr-button::after { /* click pulse */
    content: "";
    position: absolute;
    inset: -.5cqi;
    border: .3cqi solid var(--fxv-teal);
    border-radius: 1.2cqi;
    opacity: 0;
}
.vn-fxv-slide--mini { grid-template-columns: 1fr 1fr; align-items: center; gap: 1.6cqi; width: 30cqi; aspect-ratio: 16 / 9; padding: 2.2cqi; }
.vn-fxv-slide--mini .vn-fxv-headline { font-size: 1.9cqi; }
.vn-fxv-pr-cursor { top: 3.2cqi; left: 44.6cqi; transform-origin: 21% 12.5%; }
.vn-fxv-pr-ripple { top: 3.75cqi; left: 45.52cqi; } /* cursor tip */
.vn-fxv-pr-arrow {
    position: absolute;
    top: 18%;
    left: 56%;
    width: 24%;
    height: 21%;
    border-top: .42cqi solid var(--fxv-teal);
    border-right: .42cqi solid var(--fxv-teal);
    border-top-right-radius: 4cqi;
}
.vn-fxv-pr-arrow i {
    position: absolute;
    right: calc(-.21cqi - .9cqi - .21cqi);
    bottom: .2cqi;
    width: 1.8cqi;
    aspect-ratio: 1;
    border-right: .42cqi solid var(--fxv-teal);
    border-bottom: .42cqi solid var(--fxv-teal);
    transform: rotate(45deg);
}
.vn-fxv-pr-click { position: absolute; top: 18%; left: 67%; z-index: 4; transform: translate(-50%, -50%); }
.vn-fxv-pr-full {
    position: absolute;
    top: 42%;
    left: 15%;
    z-index: 2;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 3cqi;
    width: 81%;
    height: 53%;
    padding: 3.6cqi 4cqi 6cqi;
    overflow: visible;
    box-shadow: var(--vnm-shadow-lg);
}
.vn-fxv-pr-full .vn-fxv-headline--xl { font-size: 3.8cqi; }
.vn-fxv-slide__copy { display: flex; flex-direction: column; gap: 1.6cqi; }
.vn-fxv-pr-video { box-shadow: 0 1cqi 2.4cqi color-mix(in srgb, var(--vnm-bg-dark) 40%, transparent); }
.vn-fxv-pr-nav {
    position: absolute;
    bottom: 5%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 1.4cqi;
    color: color-mix(in srgb, var(--fxv-paper) 85%, transparent);
    font-size: var(--fxv-label-sm);
    font-variant-numeric: tabular-nums;
    transform: translateX(-50%);
}
.vn-fxv-pr-nav svg { width: 1.8cqi; height: 1.8cqi; }
.vn-fxv-pr-corners { position: absolute; inset: -1.8cqi; pointer-events: none; }
.vn-fxv-pr-corners i { position: absolute; width: 4cqi; aspect-ratio: 1; border: 0 solid var(--fxv-teal); }
.vn-fxv-pr-corners i:nth-child(1) { top: 0; left: 0; border-top-width: .45cqi; border-left-width: .45cqi; border-top-left-radius: 1.4cqi; }
.vn-fxv-pr-corners i:nth-child(2) { top: 0; right: 0; border-top-width: .45cqi; border-right-width: .45cqi; border-top-right-radius: 1.4cqi; }
.vn-fxv-pr-corners i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: .45cqi; border-left-width: .45cqi; border-bottom-left-radius: 1.4cqi; }
.vn-fxv-pr-corners i:nth-child(4) { right: 0; bottom: 0; border-right-width: .45cqi; border-bottom-width: .45cqi; border-bottom-right-radius: 1.4cqi; }
.vn-fxv-pr-keys { position: absolute; bottom: 4.5%; left: 3%; z-index: 4; display: flex; align-items: center; gap: .8cqi; }
.vn-fxv-pr-keys .vn-fxv-chip { margin-left: .4cqi; }

/* ==========================================================================
   reading-mode
   ========================================================================== */
.vn-fxv-rm-pdf { top: 6%; left: 4%; width: 44%; height: 76%; }
.vn-fxv-rm-page { width: 32cqi; aspect-ratio: .72; gap: 1.1cqi; padding: 2.4cqi; }
.vn-fxv-rm-page .vn-fxv-headline--xl { font-size: 2.6cqi; }
.vn-fxv-rm-page .vn-fxv-play { --s: 4.6cqi; }
.vn-fxv-rm-switch {
    position: absolute;
    top: 44%;
    left: 50%;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 6.6cqi;
    aspect-ratio: 1;
    border: .5cqi solid var(--fxv-paper);
    border-radius: 50%;
    background: var(--fxv-teal-strong);
    box-shadow: var(--fxv-drop);
    color: var(--fxv-paper);
    transform: translate(-50%, -50%);
}
.vn-fxv-rm-switch svg { width: 3cqi; height: 3cqi; stroke-width: 2.2; }
.vn-fxv-rm-text { top: 6%; right: 4%; width: 46%; height: 76%; }
.vn-fxv-rm-body { flex: 1; display: flex; flex-direction: column; gap: 1.6cqi; min-height: 0; padding: 2.4cqi 3cqi 3cqi; overflow: hidden; }
.vn-fxv-rm-tools { display: flex; align-self: flex-end; align-items: baseline; gap: .8cqi; color: var(--fxv-ink); }
.vn-fxv-rm-tools b { font-family: var(--vnm-font-heading); font-size: 1.5cqi; font-weight: 700; line-height: 1; }
.vn-fxv-rm-tools b + b { font-size: 2.2cqi; }
.vn-fxv-rm-tools svg { width: 2cqi; height: 2cqi; margin-left: .6cqi; align-self: center; }
.vn-fxv-rm-row { display: flex; align-items: flex-start; gap: 1.4cqi; min-width: 0; }
.vn-fxv-rm-h1 { color: var(--fxv-ink); font-family: var(--vnm-font-heading); font-size: 2.8cqi; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.vn-fxv-rm-h2 { color: var(--fxv-ink); font-family: var(--vnm-font-heading); font-size: 2cqi; font-weight: 700; line-height: 1.15; }
.vn-fxv-rm-row .vn-fxv-lines--bold { padding-top: .6cqi; }
.vn-fxv-rm-media { flex: 1; }
.vn-fxv-rm-media .vn-fxv-play { --s: 4.8cqi; }
.vn-fxv-rm-chips { position: absolute; right: 3%; bottom: 4%; left: 3%; z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqi; }

/* ==========================================================================
   branding
   ========================================================================== */
.vn-fx-visual--branding { /* sample customer colours: yours (dark teal), indigo, red, green */
    --fxv-brand-1: var(--vnm-secondary);
    --fxv-brand-2: #34418a;
    --fxv-brand-3: var(--vnm-accent);
    --fxv-brand-4: #2f7a4d;
}
.vn-fxv-br-window { top: 4%; left: 6%; width: 88%; height: 57%; }
/* The brand colour (toolbar, logo mark, swatch) is a strip of the colours behind the content:
   moving it with translateX(-20%) shows the next colour (the last band repeats the first, so
   the loop wraps without a jump). At rest the first colour shows. */
.vn-fxv-brand-bg { position: relative; isolation: isolate; overflow: hidden; background-color: var(--fxv-brand-1); }
.vn-fxv-brand-bg::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 500%;
    background: linear-gradient(90deg, var(--fxv-brand-1) 0 20%, var(--fxv-brand-2) 20% 40%, var(--fxv-brand-3) 40% 60%, var(--fxv-brand-4) 60% 80%, var(--fxv-brand-1) 80%);
    pointer-events: none;
}
/* The page background (canvas and its swatch) follows with light tints of the same colours */
.vn-fxv-br-tint { position: relative; isolation: isolate; overflow: hidden; }
.vn-fxv-br-tint::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 500%;
    background: linear-gradient(90deg,
        var(--fxv-mint) 0 20%,
        color-mix(in srgb, var(--fxv-brand-2) 11%, var(--fxv-paper)) 20% 40%,
        color-mix(in srgb, var(--fxv-brand-3) 11%, var(--fxv-paper)) 40% 60%,
        color-mix(in srgb, var(--fxv-brand-4) 11%, var(--fxv-paper)) 60% 80%,
        var(--fxv-mint) 80%);
    pointer-events: none;
}
.vn-fxv-br-toolbar {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2cqi;
    height: 6.4cqi;
    padding-inline: 2.4cqi;
    color: var(--fxv-paper);
}
.vn-fxv-br-pager { display: flex; align-items: center; gap: .8cqi; font-size: var(--fxv-label-sm); font-variant-numeric: tabular-nums; }
.vn-fxv-br-pager svg { width: 1.7cqi; height: 1.7cqi; }
.vn-fxv-br-logo {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    min-width: 0;
    padding: .38em .8em .38em .45em;
    border-radius: .7cqi;
    background: var(--fxv-paper);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-heading);
    font-size: var(--fxv-label-sm);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}
.vn-fxv-br-mark { flex: none; width: 1.3em; aspect-ratio: 1; border-radius: .3em; transform: rotate(45deg) scale(.8); }
.vn-fxv-br-site {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    min-width: 0;
    padding: .3em .75em;
    border: 1px solid color-mix(in srgb, var(--fxv-paper) 55%, transparent);
    border-radius: var(--vnm-radius-pill);
    font-size: var(--fxv-label-sm);
    white-space: nowrap;
}
.vn-fxv-br-site svg { width: 1.1em; height: 1.1em; }
.vn-fxv-br-canvas { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.vn-fxv-br-page { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2.6cqi; width: 56cqi; height: 26cqi; padding: 3cqi; }
.vn-fxv-br-copy { display: flex; flex-direction: column; gap: 1.2cqi; }
.vn-fxv-br-panel { right: 12%; bottom: 4%; left: 12%; gap: 1.3cqi; padding: 2cqi 2.6cqi; }
.vn-fxv-br-head { display: flex; align-items: center; justify-content: space-between; gap: 1.6cqi; min-width: 0; }
.vn-fxv-br-row { display: grid; grid-template-columns: auto minmax(0, 10em) 1fr; align-items: center; gap: 1.4cqi; }
.vn-fxv-br-swatch { display: grid; place-items: center; width: 2.6cqi; aspect-ratio: 1; border-radius: 50%; }
.vn-fxv-br-swatch--bg { border: 1px solid var(--fxv-hair); background: var(--fxv-mint); }
.vn-fxv-br-swatch--link { border: 1px solid var(--fxv-hair); background: var(--fxv-paper); color: var(--fxv-ink); }
.vn-fxv-br-swatch--link svg { width: 1.6cqi; height: 1.6cqi; }
.vn-fxv-br-name { overflow: hidden; color: var(--vnm-text); font-size: var(--fxv-label-sm); text-overflow: ellipsis; white-space: nowrap; }
.vn-fxv-br-spectrum {
    position: relative;
    height: 1.3cqi;
    border-radius: var(--vnm-radius-pill);
    background: linear-gradient(90deg, var(--fxv-brand-3) 0% 5%, var(--fxv-brand-4) 30%, var(--fxv-brand-1) 56%, var(--fxv-brand-2) 82%, var(--vnm-text-strong) 100%);
}
.vn-fxv-br-row + .vn-fxv-br-row .vn-fxv-br-spectrum { /* light tints: the knob rests on the first one (20%) */
    background: linear-gradient(90deg,
        var(--fxv-paper) 0%,
        color-mix(in srgb, var(--fxv-brand-1) 30%, var(--fxv-paper)) 20%,
        color-mix(in srgb, var(--fxv-brand-2) 30%, var(--fxv-paper)) 45%,
        color-mix(in srgb, var(--fxv-brand-3) 30%, var(--fxv-paper)) 70%,
        color-mix(in srgb, var(--fxv-brand-4) 30%, var(--fxv-paper)) 95%);
}
.vn-fxv-br-spectrum i {
    position: absolute;
    top: 50%;
    left: 22%;
    width: 2.4cqi;
    aspect-ratio: 1;
    border: .35cqi solid var(--fxv-ink);
    border-radius: 50%;
    background: var(--fxv-paper);
    box-shadow: var(--fxv-drop-sm);
    transform: translate(-50%, -50%);
}
/* The animated knob is a layer as wide as the track with the dot at its right edge: moving the
   layer with translateX(-44%) puts the dot at 56% of the track, on the first brand colour (no
   layout work while it moves). The layer only ever moves to the left, so it never widens the page. */
.vn-fxv-br-spectrum .vn-fxv-br-knob {
    left: 0;
    width: 100%;
    height: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: translate(-44%, -50%);
    pointer-events: none;
}
.vn-fxv-br-row + .vn-fxv-br-row .vn-fxv-br-knob { transform: translate(-80%, -50%); }
.vn-fxv-br-knob::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 2.4cqi;
    aspect-ratio: 1;
    border: .35cqi solid var(--fxv-ink);
    border-radius: 50%;
    background: var(--fxv-paper);
    box-shadow: var(--fxv-drop-sm);
    transform: translate(-50%, -50%);
}
.vn-fxv-br-field {
    min-width: 0;
    padding: .35em .7em;
    overflow: hidden;
    border: 1px solid var(--fxv-hair);
    border-radius: .6cqi;
    background: var(--fxv-tint);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-mono);
    font-size: var(--fxv-label-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   public-page
   ========================================================================== */
.vn-fxv-pp-window { top: 4%; left: 4%; width: 92%; height: 82%; }
.vn-fxv-pp-share { position: absolute; bottom: 3.5%; left: 50%; z-index: 5; max-width: 92%; transform: translateX(-50%); }
.vn-fxv-pp-body { flex: 1; display: flex; flex-direction: column; gap: 2cqi; min-height: 0; padding: 2.2cqi; }
.vn-fxv-pp-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2.2cqi;
    padding: 2.6cqi;
    border-radius: 1.4cqi;
    background: linear-gradient(135deg, var(--vnm-secondary) 0%, var(--vnm-bg-dark) 100%);
    color: var(--fxv-paper);
}
.vn-fxv-pp-logo { display: grid; place-items: center; width: 8cqi; aspect-ratio: 1; border-radius: 1.6cqi; background: var(--fxv-paper); }
.vn-fxv-pp-logo b { color: var(--vnm-secondary); font-family: var(--vnm-font-heading); font-size: 4.4cqi; font-weight: 800; line-height: 1; }
.vn-fxv-pp-id { display: flex; flex-direction: column; gap: 1cqi; min-width: 0; }
.vn-fxv-pp-id .vn-fxv-lines { width: 70%; }
.vn-fxv-pp-name { font-family: var(--vnm-font-heading); font-size: 2.6cqi; font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.vn-fxv-pp-site { display: inline-flex; align-items: center; gap: .4em; color: color-mix(in srgb, var(--fxv-paper) 90%, transparent); font-size: var(--fxv-label-sm); white-space: nowrap; }
.vn-fxv-pp-site svg { width: 1.1em; height: 1.1em; }
.vn-fxv-pp-public { align-self: start; border-color: transparent; box-shadow: none; }
.vn-fxv-pp-dot { width: .6em; aspect-ratio: 1; border-radius: 50%; background: var(--fxv-teal); }
.vn-fxv-pp-head { display: flex; align-items: center; gap: 1.6cqi; color: var(--fxv-ink); font-family: var(--vnm-font-heading); font-size: var(--fxv-label); font-weight: 700; white-space: nowrap; }
.vn-fxv-pp-head i { flex: 1; height: 1px; background: var(--fxv-hair); }
.vn-fxv-pp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.2cqi; }
.vn-fxv-pp-item { display: flex; flex-direction: column; gap: 1cqi; min-width: 0; }
.vn-fxv-pp-item .vn-fxv-chair { position: absolute; bottom: 6%; left: 50%; width: 62%; transform: translateX(-50%); }
.vn-fxv-pp-label { overflow: hidden; color: var(--fxv-ink); font-size: var(--fxv-label-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   embed
   ========================================================================== */
.vn-fxv-em-dash { top: 4%; left: 4%; width: 58%; height: 40%; }
.vn-fxv-em-dash-body { flex: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2.4cqi; min-height: 0; padding: 2.2cqi 2.6cqi; }
.vn-fxv-em-thumb { width: 12cqi; }
.vn-fxv-em-code-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1cqi; min-width: 0; }
.vn-fxv-code {
    display: block;
    width: 100%;
    padding: 1.3cqi 1.6cqi;
    border-radius: .9cqi;
    background: var(--vnm-text-strong);
    color: var(--fxv-paper);
    font-family: var(--vnm-font-mono);
    font-size: max(.4375rem, 1.45cqi);
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
}
.vn-fxv-code em { color: color-mix(in srgb, var(--vnm-accent) 55%, var(--fxv-paper)); }
.vn-fxv-code__str { color: color-mix(in srgb, var(--vnm-primary) 65%, var(--fxv-paper)); }
.vn-fxv-em-copy { align-self: flex-end; box-shadow: none; }
.vn-fxv-em-cursor { right: 5%; bottom: 2%; transform-origin: 21% 12.5%; }
.vn-fxv-em-ripple { top: calc(98% - 3.85cqi); left: calc(95% - 3.48cqi); } /* cursor tip */
.vn-fxv-em-arrow {
    position: absolute;
    top: 22%;
    left: 63%;
    width: 25%;
    height: 22.5%;
    border-top: .42cqi solid var(--fxv-teal);
    border-right: .42cqi solid var(--fxv-teal);
    border-top-right-radius: 4cqi;
}
.vn-fxv-em-arrow i {
    position: absolute;
    right: calc(-.21cqi - .9cqi - .21cqi);
    bottom: .2cqi;
    width: 1.8cqi;
    aspect-ratio: 1;
    border-right: .42cqi solid var(--fxv-teal);
    border-bottom: .42cqi solid var(--fxv-teal);
    transform: rotate(45deg);
}
.vn-fxv-em-paste { position: absolute; top: 32%; right: 3%; z-index: 4; }
.vn-fxv-em-site { top: 47%; left: 12%; width: 84%; height: 49%; z-index: 2; }
.vn-fxv-em-site-body {
    flex: 1;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    grid-template-rows: auto 1fr;
    gap: 1.8cqi 3cqi;
    min-height: 0;
    padding: 1.8cqi 2.6cqi 2.4cqi;
}
.vn-fxv-em-nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 2cqi; padding-bottom: 1.2cqi; border-bottom: 1px solid var(--fxv-hair); }
.vn-fxv-em-nav b { margin-right: auto; color: var(--fxv-ink); font-family: var(--vnm-font-heading); font-size: 1.6cqi; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.vn-fxv-em-nav i { width: 6cqi; height: .6cqi; border-radius: 1cqi; background: var(--fxv-text-line); }
.vn-fxv-em-copy-col { display: flex; flex-direction: column; justify-content: center; gap: 1.3cqi; }
.vn-fxv-em-frame { display: flex; flex-direction: column; align-items: center; min-height: 0; overflow: hidden; border: 1px solid var(--fxv-hair); border-radius: 1cqi; background: var(--fxv-mint); }
.vn-fxv-em-frame-bar { align-self: stretch; flex: none; height: 2.4cqi; background: var(--vnm-secondary); }
.vn-fxv-spread--tiny { width: 31cqi; margin-block: auto; aspect-ratio: 1.46; }
.vn-fxv-spread--tiny .vn-fxv-leaf { gap: .7cqi; padding: 1.3cqi; }
.vn-fxv-spread--tiny .vn-fxv-leaf--cover { padding: 0; }
.vn-fxv-spread--tiny .vn-fxv-cover { height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }

/* ==========================================================================
   secure-sharing
   ========================================================================== */
.vn-fxv-se-window { top: 5%; left: 4%; width: 64%; height: 90%; }
.vn-fxv-se-card { position: relative; width: 44cqi; gap: 1.8cqi; padding: 3cqi; box-shadow: var(--fxv-drop); }
.vn-fxv-se-head { display: flex; align-items: center; gap: 1.6cqi; min-width: 0; }
.vn-fxv-se-head > span:last-child { display: flex; flex-direction: column; gap: .4cqi; min-width: 0; }
.vn-fxv-se-lock { flex: none; display: grid; place-items: center; width: 5.6cqi; aspect-ratio: 1; border-radius: 50%; background: var(--fxv-mint); color: var(--fxv-ink); }
.vn-fxv-se-lock svg { width: 2.8cqi; height: 2.8cqi; }
.vn-fxv-se-mail {
    display: flex;
    align-items: center;
    gap: .6em;
    min-width: 0;
    padding: .7em .9em;
    border: 1px solid var(--fxv-hair);
    border-radius: .9cqi;
    background: var(--fxv-tint);
    color: var(--fxv-ink);
    font-size: var(--fxv-label-sm);
}
.vn-fxv-se-mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-fxv-se-mail svg { width: 1.2em; height: 1.2em; }
.vn-fxv-se-code { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4cqi; }
.vn-fxv-se-code b {
    display: grid;
    place-items: center;
    aspect-ratio: .95;
    border: .3cqi solid color-mix(in srgb, var(--fxv-ink) 20%, transparent);
    border-radius: .9cqi;
    background: var(--fxv-paper);
    color: var(--fxv-ink);
    font-family: var(--vnm-font-heading);
    font-size: 3cqi;
    font-weight: 700;
    line-height: 1;
}
.vn-fxv-se-code b > span { display: block; }
.vn-fxv-se-focus { /* focus ring of the code field being typed, resting on the last field */
    position: absolute;
    top: 0;
    left: 0;
    width: calc((100% - 3 * 1.4cqi) / 4);
    height: 100%;
    border: .3cqi solid var(--fxv-teal);
    border-radius: .9cqi;
    box-shadow: 0 0 0 .6cqi color-mix(in srgb, var(--vnm-primary) 18%, transparent);
    transform: translateX(calc(300% + 4.2cqi));
}
.vn-fxv-se-btn {
    display: block;
    padding: .75em 1em;
    overflow: hidden;
    border-radius: .9cqi;
    background: var(--fxv-teal-strong);
    color: var(--fxv-paper);
    font-size: var(--fxv-label);
    font-weight: 500;
    text-align: center;
    text-wrap: balance;
}
.vn-fxv-se-preview { top: 22%; right: 4%; width: 31%; align-items: flex-start; gap: 1.2cqi; }
.vn-fxv-se-page { width: 100%; aspect-ratio: .74; gap: .9cqi; padding: 1.8cqi; border: 1px solid var(--fxv-hair); box-shadow: none; }
.vn-fxv-se-page .vn-fxv-kicker { font-size: .85cqi; }
.vn-fxv-se-page .vn-fxv-headline { font-size: 2cqi; }
.vn-fxv-se-table { display: grid; gap: .45cqi; margin-block: .6cqi; }
.vn-fxv-se-table i { height: 1.6cqi; border-radius: .2cqi; background: var(--fxv-mint); }
.vn-fxv-se-table i:first-child { background: var(--fxv-ink); }
.vn-fxv-se-mark {
    position: absolute;
    top: 54%;
    left: 50%;
    color: color-mix(in srgb, var(--vnm-accent) 40%, transparent);
    font-family: var(--vnm-font-heading);
    font-size: clamp(.5rem, 2.3cqi, .9375rem);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-38deg);
}

/* ==========================================================================
   analytics (modelled on the real statistics page of a PDF: pdf-statistics)
   ========================================================================== */
.vn-fxv-an-window { top: 4%; left: 4%; width: 92%; height: 82%; }
.vn-fxv-an-body { flex: 1; display: flex; flex-direction: column; gap: 1.4cqi; min-height: 0; padding: 1.8cqi 2cqi 2cqi; overflow: hidden; background: var(--fxv-tint); }
.vn-fxv-an-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6cqi;
    min-width: 0;
    padding: 1.5cqi 1.8cqi;
    border-radius: 1.6cqi;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--vnm-primary) 26%, transparent), transparent 40%),
        linear-gradient(135deg, var(--vnm-secondary-dark) 0%, var(--vnm-secondary) 55%, var(--vnm-primary) 100%);
    color: var(--fxv-paper);
}
.vn-fxv-an-id { display: flex; flex-direction: column; gap: .5cqi; min-width: 0; }
.vn-fxv-an-kicker { overflow: hidden; color: color-mix(in srgb, var(--fxv-paper) 80%, transparent); font-family: var(--vnm-font-heading); font-size: max(.4375rem, 1.1cqi); font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.vn-fxv-an-title { overflow: hidden; font-family: var(--vnm-font-heading); font-size: clamp(.75rem, 2.6cqi, 1.25rem); font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.vn-fxv-an-open {
    flex: none;
    padding: .45em 1em;
    border-radius: var(--vnm-radius-pill);
    background: var(--fxv-paper);
    box-shadow: 0 .6cqi 1.4cqi color-mix(in srgb, var(--vnm-text-strong) 14%, transparent);
    color: var(--vnm-secondary-dark);
    font-size: var(--fxv-label-sm);
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.vn-fxv-an-ranges { flex: none; display: flex; gap: .8cqi; min-width: 0; }
.vn-fxv-an-ranges span {
    padding: .3em .85em;
    border: 1px solid var(--fxv-hair);
    border-radius: var(--vnm-radius-pill);
    background: var(--fxv-paper);
    color: var(--vnm-secondary-dark);
    font-size: var(--fxv-label-sm);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.vn-fxv-an-ranges .is-active { border-color: transparent; background: var(--fxv-teal-strong); color: var(--fxv-paper); }
.vn-fxv-an-metrics { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqi; }
.vn-fxv-an-metric,
.vn-fxv-an-panel {
    min-width: 0;
    border: 1px solid var(--fxv-hair);
    border-radius: 1.4cqi;
    background: var(--fxv-paper);
    box-shadow: 0 .8cqi 2cqi color-mix(in srgb, var(--vnm-secondary-dark) 7%, transparent);
}
.vn-fxv-an-metric { display: flex; flex-direction: column; gap: .9cqi; padding: 1.2cqi 1.4cqi; }
.vn-fxv-an-metric span { overflow: hidden; color: var(--vnm-text-muted); font-size: var(--fxv-label-sm); font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.vn-fxv-an-metric b { overflow: hidden; color: var(--vnm-secondary-dark); font-family: var(--vnm-font-heading); font-size: clamp(.8125rem, 3.2cqi, 1.5rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vn-fxv-an-panels { flex: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 1.2cqi; min-height: 0; }
.vn-fxv-an-panel { display: flex; flex-direction: column; gap: 1cqi; padding: 1.3cqi 1.4cqi; }
.vn-fxv-an-label { overflow: hidden; color: var(--vnm-secondary-dark); font-family: var(--vnm-font-heading); font-size: var(--fxv-label-sm); font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

/* Line chart: the SVG scales uniformly (fixed aspect ratio), so the points stay round */
.vn-fxv-an-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5cqi .8cqi; color: var(--vnm-text-muted); font-size: max(.4375rem, 1.15cqi); font-variant-numeric: tabular-nums; line-height: 1; }
.vn-fxv-an-yaxis { position: relative; width: 2.1em; }
.vn-fxv-an-yaxis i { position: absolute; right: 0; transform: translateY(-50%); }
.vn-fxv-an-chart { position: relative; aspect-ratio: 2; }
.vn-fxv-an-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The line and its points lie in a second, identical SVG on top of the grid and the area, inside
   two layers that reveal it from left to right when it is drawn again (see Motion) */
.vn-fxv-an-wipe { position: absolute; inset: 0; overflow: hidden; }
.vn-fxv-an-wipe > span { display: block; height: 100%; }
.vn-fxv-an-xaxis { grid-column: 2; display: flex; justify-content: space-between; gap: .6em; white-space: nowrap; }
.vn-fxv-an-grid { fill: none; stroke: color-mix(in srgb, var(--vnm-secondary-dark) 9%, transparent); stroke-width: .8; }
.vn-fxv-an-area { fill: color-mix(in srgb, var(--vnm-primary) 14%, transparent); }
.vn-fxv-an-line { fill: none; stroke: var(--vnm-primary); stroke-width: 2.4; stroke-linejoin: round; }
.vn-fxv-an-points circle { fill: var(--vnm-primary); stroke: var(--fxv-paper); stroke-width: 1.6; }
/* Tooltip (as in the real chart) with a guide line and the hovered point; the last one is the resting frame */
.vn-fxv-an-tip { position: absolute; top: 0; bottom: 0; z-index: 2; width: 0; opacity: 0; }
.vn-fxv-an-tip--3 { opacity: 1; }
.vn-fxv-an-tip::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px dashed color-mix(in srgb, var(--vnm-secondary-dark) 40%, transparent); }
.vn-fxv-an-tip::after {
    content: "";
    position: absolute;
    top: var(--y);
    left: 0;
    width: 2.2cqi;
    aspect-ratio: 1;
    border: .4cqi solid var(--fxv-paper);
    border-radius: 50%;
    background: var(--vnm-primary);
    box-shadow: 0 0 0 .5cqi color-mix(in srgb, var(--vnm-primary) 25%, transparent);
    transform: translate(-50%, -50%);
}
.vn-fxv-an-tipbox {
    position: absolute;
    top: var(--y);
    left: 2.2cqi;
    display: flex;
    flex-direction: column;
    gap: .35cqi;
    padding: .8cqi 1.1cqi;
    border-radius: .8cqi;
    background: var(--vnm-secondary-dark);
    box-shadow: var(--fxv-drop-sm);
    color: var(--fxv-paper);
    font-family: var(--vnm-font-body);
    font-size: var(--fxv-label-sm);
    line-height: 1.2;
    white-space: nowrap;
    transform: translateY(-50%);
}
.vn-fxv-an-tipbox::before { /* caret */
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    border: .8cqi solid transparent;
    border-right-color: var(--vnm-secondary-dark);
    transform: translateY(-50%);
}
.vn-fxv-an-tip--3 .vn-fxv-an-tipbox { right: 2.2cqi; left: auto; }
.vn-fxv-an-tip--3 .vn-fxv-an-tipbox::before { right: auto; left: 100%; border-right-color: transparent; border-left-color: var(--vnm-secondary-dark); }

/* Media lists (Videos, 3D Models): name, views and a thin bar */
.vn-fxv-an-side { display: flex; flex-direction: column; gap: 1.2cqi; min-width: 0; }
.vn-fxv-an-panelhead { display: flex; align-items: center; justify-content: space-between; gap: .8cqi; min-width: 0; }
.vn-fxv-an-pill { flex: none; padding: .3em .7em; border-radius: var(--vnm-radius-pill); background: color-mix(in srgb, var(--vnm-primary) 14%, transparent); color: var(--vnm-secondary-dark); font-size: max(.4375rem, 1.2cqi); font-weight: 800; line-height: 1.2; white-space: nowrap; }
.vn-fxv-an-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7cqi 1cqi;
    padding: .9cqi 1.1cqi 1.1cqi;
    border: 1px solid color-mix(in srgb, var(--vnm-secondary-dark) 8%, transparent);
    border-radius: 1.1cqi;
    background: linear-gradient(180deg, var(--fxv-paper) 0%, var(--fxv-tint) 100%);
}
.vn-fxv-an-name { overflow: hidden; color: var(--vnm-text-strong); font-size: var(--fxv-label-sm); font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.vn-fxv-an-item b { color: var(--vnm-secondary-dark); font-size: var(--fxv-label-sm); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vn-fxv-an-meter { grid-column: 1 / -1; height: .8cqi; overflow: hidden; border-radius: var(--vnm-radius-pill); background: color-mix(in srgb, var(--vnm-secondary-dark) 8%, transparent); }
.vn-fxv-an-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vnm-primary), var(--vnm-secondary)); transform-origin: left center; }
.vn-fxv-an-privacy { position: absolute; bottom: 3.5%; left: 50%; z-index: 5; max-width: 92%; transform: translateX(-50%); }

/* ==========================================================================
   interactive-magazine (hero)
   ========================================================================== */
.vn-fxv-im-window { top: 9%; left: 5%; width: 90%; height: 80%; }
.vn-fxv-im-spread { width: 79cqi; aspect-ratio: 1.6; }
.vn-fxv-im-spread .vn-fxv-leaf { gap: 1.1cqi; padding: 2.6cqi 2.8cqi; }
.vn-fxv-im-video { margin-block: .4cqi; }
.vn-fxv-im-row { display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 1.8cqi; margin-block: .4cqi; }
.vn-fxv-im-3d { aspect-ratio: 1.2; }
.vn-fxv-im-3d .vn-fxv-cube { --cube: 7cqi; }
.vn-fxv-im-ss { aspect-ratio: 2.7; margin-block: .4cqi; }
.vn-fxv-im-cta { display: flex; margin-top: auto; }
.vn-fxv-im-btn {
    padding: .7cqi 1.6cqi;
    border-radius: .6cqi;
    background: var(--vnm-secondary);
    color: var(--fxv-paper);
    font-family: var(--vnm-font-heading);
    font-size: 1.25cqi;
    font-weight: 700;
    outline: .32cqi dashed var(--fxv-accent);
    outline-offset: .45cqi;
    white-space: nowrap;
}
.vn-fxv-im-tag { position: absolute; z-index: 5; }
.vn-fxv-im-tag--video { top: 54%; left: 2.5%; }
.vn-fxv-im-tag--3d { top: 31%; right: 2.5%; }
.vn-fxv-im-tag--ss { top: 59%; right: 2.5%; }
.vn-fxv-im-tag--link { top: 74%; left: 66%; }
.vn-fxv-im-tag--link svg { color: var(--fxv-accent); }

/* ==========================================================================
   Small containers (phones, compact grids): drop secondary details
   ========================================================================== */
@container (max-width: 420px) {
    .vn-fxv-vd-options .vn-fxv-chip + .vn-fxv-chip,
    .vn-fxv-rm-chips .vn-fxv-chip:nth-child(3),
    .vn-fxv-ss-options .vn-fxv-chip:nth-child(n + 3),
    .vn-fxv-pr-keys .vn-fxv-chip,
    .vn-fxv-3d-hint,
    .vn-fxv-cd-count,
    .vn-fxv-im-tag--link,
    .vn-fxv-em-thumb { display: none; }
    .vn-fxv-em-dash-body { grid-template-columns: minmax(0, 1fr); padding-block: 1.6cqi; }
    .vn-fxv-em-dash { height: 41%; }
    .vn-fxv-code > span:last-child,
    .vn-fxv-em-cursor,
    .vn-fxv-em-ripple { display: none; }
    .vn-fxv-em-paste { display: none; }
    .vn-fxv-pp-grid .vn-fxv-cover { aspect-ratio: .92; }
    .vn-fxv-pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vn-fxv-pp-item:nth-child(4) { display: none; }
    .vn-fxv-pp-share { left: 4%; max-width: calc(92% - 3rem); font-size: var(--fxv-label-sm); transform: none; } /* room for the pause control */
    .vn-fxv-br-row { grid-template-columns: auto minmax(0, 1fr) 1fr; }
    .vn-fxv-an-ranges { display: none; }
    .vn-fxv-an-privacy { left: 4%; max-width: calc(92% - 3rem); transform: none; } /* room for the pause control */
    .vn-fxv-an-body { gap: 1.1cqi; padding-block: 1.6cqi 1.4cqi; }
    /* Each metric card as wide as its label needs ("Avg. active duration"), the rest shared */
    .vn-fxv-an-metrics { grid-template-columns: repeat(3, minmax(0, auto)); }
    /* The views pill moves below the panel title when both do not fit ("Videos" in German) */
    .vn-fxv-an-panelhead { flex-wrap: wrap; row-gap: .5cqi; }
}
@container (max-width: 520px) {
    .vn-fxv-an-side .vn-fxv-an-panel + .vn-fxv-an-panel { display: none; }
}

/* ==========================================================================
   Motion (decorative, only when the reader has not asked for less motion)

   Every figure loops a calm animation with resting moments. assets/js/features.js adds
   .is-playing to the .vn-fx-visual the first time it scrolls into view and keeps
   .is-visible in step with the viewport: a figure off screen holds its current frame
   (animation-play-state) and continues from there when it comes back, so nothing restarts
   from zero and off-screen figures do no animation work. The script also adds the pause
   control (.vn-fxv-toggle, WCAG 2.2.2): pressed, it pauses every feature visual on the page
   (.is-paused) and the looping product videos (shared with vnm-ui.js). Each loop starts on
   the figure's resting frame – what readers see without the script, with reduced motion and
   in print. Moving parts only animate transform and opacity, at most one animation of a
   property per element, so every loop runs on the compositor without style recalculations
   while it plays; the brand red marks the cursor clicks and the "playing" dot.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* magazine-scroll: the page corner lifts now and then, the document scrolls down and back */
    .vn-fx-visual.is-playing .vn-fxv-ms-mag .vn-fxv-leaf--curl::after { animation: vn-fxv-curl 6s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-ms-pages { animation: vn-fxv-scroll-pages 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-ms-scroll .vn-fxv-scrollbar i { animation: vn-fxv-scroll-thumb 12s var(--fxv-ease) infinite; }

    /* videos: the progress runs in a 12 s loop (starting at its resting position). A playing
       video (.vn-fxv-video--playing) hides its play button and shows a moving scene with the
       same 12 s rhythm: a slow drift of the picture, clouds, a tram and, once per loop, birds. */
    .vn-fx-visual.is-playing .vn-fxv-progress i { animation: vn-fxv-progress 12s linear -4.08s infinite; }
    .vn-fx-visual.is-playing .vn-fxv-video--playing .vn-fxv-play { animation: vn-fxv-play-out .6s var(--fxv-ease) .3s both; }
    .vn-fx-visual.is-playing .vn-fxv-video--playing .vn-fxv-photo { animation: vn-fxv-kenburns 12s ease-in-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cloud { animation: vn-fxv-drift 12s linear -3.68s infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cloud--2 { animation-delay: -8.32s; }
    .vn-fx-visual.is-playing .vn-fxv-tram { animation: vn-fxv-tram 12s linear infinite; }
    .vn-fx-visual.is-playing .vn-fxv-birds { animation: vn-fxv-birds 12s linear infinite; }
    .vn-fx-visual.is-playing .vn-fxv-birds svg { animation: vn-fxv-flap .45s ease-in-out infinite alternate; }
    .vn-fx-visual.is-playing .vn-fxv-live { animation: vn-fxv-fade-in .6s var(--fxv-ease) .3s both; }
    .vn-fx-visual.is-playing .vn-fxv-live::before { animation: vn-fxv-live 2.4s ease-in-out .9s infinite; }
    /* paused by the reader: the video shows its play button again (and hides it on resume) */
    .vn-fx-visual.is-paused .vn-fxv-video--playing :is(.vn-fxv-play, .vn-fxv-live) { animation: none; }

    /* 3D model: a slow, steady turn (one turn in 20 s) */
    .vn-fx-visual.is-playing .vn-fxv-cube:not(.vn-fxv-cube--static) { animation: vn-fxv-spin 20s linear infinite; }

    /* click dummy (9 s): the hotspot moves on, the cursor clicks (red ripple) and the next
       screen appears – through all four colours and back to the first */
    .vn-fx-visual.is-playing .vn-fxv-cd-ring { animation: vn-fxv-cd-ring 9s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cd-ring .vn-fxv-cursor { animation: vn-fxv-press 2.25s ease-in-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cd-ring .vn-fxv-ripple { animation: vn-fxv-ripple 2.25s ease-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cd-screen--1 { animation: vn-fxv-cd-screen-1 9s linear infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cd-screen--2 { animation: vn-fxv-cd-screen-2 9s linear infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cd-screen--3 { animation: vn-fxv-cd-screen-3 9s linear infinite; }
    .vn-fx-visual.is-playing .vn-fxv-cd-screen--4 { animation: vn-fxv-cd-screen-4 9s linear infinite; }

    /* slideshow (12 s): slide by slide in an endless loop (the fourth slide repeats the first,
       so the jump back is invisible); the dots follow and the arrow is pressed before each change */
    .vn-fx-visual.is-playing .vn-fxv-ss-track { animation: vn-fxv-slides 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-ss-dots i:nth-child(1) { animation: vn-fxv-ss-dot-1 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-ss-dots i:nth-child(2) { animation: vn-fxv-ss-dot-2 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-ss-dots i:nth-child(3) { animation: vn-fxv-ss-dot-3 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-ss-arrow--next { animation: vn-fxv-ss-arrow 4s ease-in-out infinite; }

    /* link area (10 s): rest, the rectangle is drawn again (it grows from the top-left corner
       with the cursor), then gets its label; the cursor clicks, the link appears */
    .vn-fx-visual.is-playing .vn-fxv-la-area { animation: vn-fxv-draw 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-la-area .vn-fxv-chip { animation: vn-fxv-draw-label 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-la-cursor { animation: vn-fxv-draw-cursor 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-la-ripple { animation: vn-fxv-la-ripple 10s ease-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-la-pop { animation: vn-fxv-pop 10s var(--fxv-ease) infinite; }

    /* presentation (10 s): a click on the fullscreen button opens the slide; later the arrow
       key moves on to the next slide */
    .vn-fx-visual.is-playing .vn-fxv-pr-cursor { animation: vn-fxv-pr-press 10s ease-in-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-pr-ripple { animation: vn-fxv-pr-ripple 10s ease-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-pr-button::after { animation: vn-fxv-pr-ring 10s ease-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-pr-full { animation: vn-fxv-pr-open 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-pr-corners { animation: vn-fxv-pr-corners 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-pr-keys .vn-fxv-key:nth-child(2) { animation: vn-fxv-key 10s ease-in-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-pr-full .vn-fxv-slide__copy { animation: vn-fxv-next 10s var(--fxv-ease) infinite; }

    /* branding (14 s): toolbar, logo mark, swatch and page background run through four brand
       colours; the knobs move in step and the logo mark turns */
    .vn-fx-visual.is-playing :is(.vn-fxv-brand-bg, .vn-fxv-br-tint)::before { animation: vn-fxv-brand 14s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-br-knob { animation: vn-fxv-knob 14s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-br-row + .vn-fxv-br-row .vn-fxv-br-knob { animation-name: vn-fxv-knob-bg; }
    .vn-fx-visual.is-playing .vn-fxv-br-mark { animation: vn-fxv-mark 14s var(--fxv-ease) infinite; }

    /* secure sharing (10 s): the code is typed again field by field, then "Verify & open" */
    .vn-fx-visual.is-playing .vn-fxv-se-focus { animation: vn-fxv-se-focus 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-se-code b:nth-child(1) > span { animation: vn-fxv-se-digit-1 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-se-code b:nth-child(2) > span { animation: vn-fxv-se-digit-2 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-se-code b:nth-child(3) > span { animation: vn-fxv-se-digit-3 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-se-code b:nth-child(4) > span { animation: vn-fxv-se-digit-4 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-se-btn { animation: vn-fxv-se-btn 10s ease-in-out infinite; }

    /* reading mode (8 s): the switch between PDF view and reading mode turns now and then */
    .vn-fx-visual.is-playing .vn-fxv-rm-switch { animation: vn-fxv-rm-switch 8s var(--fxv-ease) infinite; }

    /* embed (10 s): "Copy code" is clicked, the paste hint nudges, the publication loads in the page */
    .vn-fx-visual.is-playing .vn-fxv-em-cursor { animation: vn-fxv-em-press 10s ease-in-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-em-ripple { animation: vn-fxv-em-ripple 10s ease-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-em-copy { animation: vn-fxv-em-copy 10s ease-in-out infinite; }
    .vn-fx-visual.is-playing .vn-fxv-em-paste { animation: vn-fxv-em-paste 10s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-em-frame .vn-fxv-spread { animation: vn-fxv-em-load 10s var(--fxv-ease) infinite; }

    /* public page (12 s): the covers lift one after another, as if a visitor browsed them */
    .vn-fx-visual.is-playing .vn-fxv-pp-item .vn-fxv-cover { animation: vn-fxv-pp-lift 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-pp-item:nth-child(2) .vn-fxv-cover { animation-delay: 2.4s; }
    .vn-fx-visual.is-playing .vn-fxv-pp-item:nth-child(3) .vn-fxv-cover { animation-delay: 4.8s; }
    .vn-fx-visual.is-playing .vn-fxv-pp-item:nth-child(4) .vn-fxv-cover { animation-delay: 7.2s; }

    /* analytics (12 s): the visits line draws in, the area and points fade in, the tooltip
       hops across three days and rests on the last one; the media bars grow with the line.
       The line is revealed by a wipe: the outer layer (overflow: hidden) slides in from the
       left while the inner one slides back by the same distance, so the line stays in place
       and only the clip edge moves – transforms only, no repaint of the stroke */
    .vn-fx-visual.is-playing .vn-fxv-an-wipe { animation: vn-fxv-an-wipe 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-an-wipe > span { animation: vn-fxv-an-wipe-in 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing :is(.vn-fxv-an-area, .vn-fxv-an-points) { animation: vn-fxv-an-fade 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-an-tip--1 { animation: vn-fxv-an-tip-1 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-an-tip--2 { animation: vn-fxv-an-tip-2 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-an-tip--3 { animation: vn-fxv-an-tip-3 12s var(--fxv-ease) infinite; }
    .vn-fx-visual.is-playing .vn-fxv-an-meter i { animation: vn-fxv-an-meter 12s var(--fxv-ease) infinite; }

    /* Off screen, or paused with the control: every animation holds its current frame */
    .vn-fx-visual:is(.is-paused, :not(.is-visible)) .vn-fxv-stage *,
    .vn-fx-visual:is(.is-paused, :not(.is-visible)) .vn-fxv-stage *::before,
    .vn-fx-visual:is(.is-paused, :not(.is-visible)) .vn-fxv-stage *::after { animation-play-state: paused !important; }
}
/* Nothing to pause when the reader prefers reduced motion (also if the setting changes later) */
@media (prefers-reduced-motion: reduce) {
    .vn-fxv-toggle { display: none; }
}

/* magazine-scroll */
@keyframes vn-fxv-curl {
    0%, 45% { transform: scale(1); }
    60% { transform: scale(1.7); }
    75%, 100% { transform: scale(1); }
}
@keyframes vn-fxv-scroll-pages {
    0%, 12% { transform: translateY(0); }
    42%, 58% { transform: translateY(-38%); }
    88%, 100% { transform: translateY(0); }
}
@keyframes vn-fxv-scroll-thumb {
    0%, 12% { transform: translateY(30%); }
    42%, 58% { transform: translateY(260%); }
    88%, 100% { transform: translateY(30%); }
}

/* videos */
@keyframes vn-fxv-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes vn-fxv-play-out {
    to { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
}
@keyframes vn-fxv-kenburns {
    0%, 100% { transform: none; }
    50% { transform: scale(1.06) translateX(-1.5%); }
}
/* Clouds: across the picture and out (the negative delays start them at their resting place) */
@keyframes vn-fxv-drift {
    from { transform: translateX(0); }
    to { transform: translateX(124%); }
}
/* Tram: from its resting place out to the right, a pause off screen, in again from the left */
@keyframes vn-fxv-tram {
    0% { transform: translateX(72%); }
    30% { transform: translateX(130%); }
    30.01%, 60% { transform: translateX(0); }
    100% { transform: translateX(72%); }
}
/* Birds: waiting off screen at the right, then across to the left */
@keyframes vn-fxv-birds {
    0%, 50% { transform: translate(0, 0); }
    75% { transform: translate(-58%, -18%); }
    100% { transform: translate(-118%, 6%); }
}
@keyframes vn-fxv-flap {
    to { transform: scaleY(.5); }
}
@keyframes vn-fxv-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vn-fxv-live {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* 3D model: starts from the resting angle */
@keyframes vn-fxv-spin {
    from { transform: rotateX(-22deg) rotateY(-36deg); }
    to { transform: rotateX(-22deg) rotateY(324deg); }
}

/* click dummy: one step every 2.25 s; the click (cursor press and ripple) at 80% of a step */
@keyframes vn-fxv-cd-ring {
    0%, 13% { transform: translateX(0); }
    18%, 38% { transform: translateX(calc(100% + 1.4cqi)); }
    43%, 63% { transform: translateX(calc(200% + 2.8cqi)); }
    68%, 88% { transform: translateX(calc(300% + 4.2cqi)); }
    93%, 100% { transform: translateX(0); }
}
@keyframes vn-fxv-press {
    0%, 74%, 88%, 100% { transform: none; }
    80% { transform: scale(.8); }
}
@keyframes vn-fxv-ripple {
    0%, 79% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    81% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes vn-fxv-cd-screen-1 {
    0%, 20.5% { opacity: 1; }
    22%, 95.5% { opacity: 0; }
    97%, 100% { opacity: 1; }
}
@keyframes vn-fxv-cd-screen-2 {
    0%, 20.5% { opacity: 0; }
    22%, 45.5% { opacity: 1; }
    47%, 100% { opacity: 0; }
}
@keyframes vn-fxv-cd-screen-3 {
    0%, 45.5% { opacity: 0; }
    47%, 70.5% { opacity: 1; }
    72%, 100% { opacity: 0; }
}
@keyframes vn-fxv-cd-screen-4 {
    0%, 70.5% { opacity: 0; }
    72%, 95.5% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

/* slideshow: three slides, each shown for a third of the loop */
@keyframes vn-fxv-slides {
    0%, 28.3% { transform: translateX(0); }
    33.3%, 61.7% { transform: translateX(-25%); }
    66.7%, 95% { transform: translateX(-50%); }
    100% { transform: translateX(-75%); }
}
@keyframes vn-fxv-ss-dot-1 {
    0%, 29.5% { opacity: 1; transform: none; }
    32%, 96.2% { opacity: .6; transform: scaleX(.46); }
    98.7%, 100% { opacity: 1; transform: none; }
}
@keyframes vn-fxv-ss-dot-2 {
    0%, 29.5% { opacity: .6; transform: scaleX(.46); }
    32%, 62.9% { opacity: 1; transform: none; }
    65.4%, 100% { opacity: .6; transform: scaleX(.46); }
}
@keyframes vn-fxv-ss-dot-3 {
    0%, 62.9% { opacity: .6; transform: scaleX(.46); }
    65.4%, 96.2% { opacity: 1; transform: none; }
    98.7%, 100% { opacity: .6; transform: scaleX(.46); }
}
@keyframes vn-fxv-ss-arrow {
    0%, 76%, 92%, 100% { transform: translateY(-50%) scale(1); }
    84% { transform: translateY(-50%) scale(1.18); }
}

/* link area: the rectangle's bottom-right corner follows the cursor (same keyframes and easing
   from 37% to 60%) */
@keyframes vn-fxv-draw {
    0%, 20% { opacity: 1; transform: none; }
    25% { opacity: 0; transform: none; }
    25.5% { opacity: 0; transform: scale(0); }
    26%, 37% { opacity: 1; transform: scale(0); }
    60%, 100% { opacity: 1; transform: none; }
}
@keyframes vn-fxv-draw-label {
    0%, 25% { opacity: 1; }
    25.5%, 60% { opacity: 0; }
    64%, 100% { opacity: 1; }
}
@keyframes vn-fxv-draw-cursor {
    0%, 22% { transform: translate(0, 0); }
    32%, 37% { transform: translate(-24.5cqi, -24.2cqi); } /* to the top-left corner of the area */
    60%, 64.5% { transform: translate(0, 0); }
    65.5% { transform: translate(0, 0) scale(.8); }
    67%, 100% { transform: translate(0, 0); }
}
@keyframes vn-fxv-la-ripple {
    0%, 65% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    66% { opacity: .9; }
    71%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes vn-fxv-pop {
    0%, 18% { opacity: 1; transform: none; }
    24%, 67% { opacity: 0; transform: translateY(1.5cqi); }
    74%, 100% { opacity: 1; transform: none; }
}

/* presentation: the click at 24%, the arrow key at 60% */
@keyframes vn-fxv-pr-press {
    0%, 22%, 26%, 100% { transform: none; }
    24% { transform: scale(.8); }
}
@keyframes vn-fxv-pr-ripple {
    0%, 23.5% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    24.5% { opacity: .9; }
    30%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes vn-fxv-pr-ring {
    0%, 24% { opacity: 0; transform: none; }
    25% { opacity: 1; }
    36%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes vn-fxv-pr-open {
    0%, 26% { transform: none; }
    29% { transform: scale(.975); }
    38%, 100% { transform: none; }
}
@keyframes vn-fxv-pr-corners {
    0%, 26% { opacity: 1; transform: none; }
    29% { opacity: 0; transform: scale(.94); }
    40%, 100% { opacity: 1; transform: none; }
}
@keyframes vn-fxv-key {
    0%, 58%, 63%, 100% { transform: none; }
    60%, 61% { transform: translateY(.35cqi); }
}
@keyframes vn-fxv-next {
    0%, 61% { opacity: 1; transform: none; }
    65% { opacity: 0; transform: translateX(-3cqi); }
    65.1% { opacity: 0; transform: translateX(3cqi); }
    71%, 100% { opacity: 1; transform: none; }
}

/* branding: the colour strip moves on by one colour (20% of its width) per step */
@keyframes vn-fxv-brand {
    0%, 20% { transform: translateX(0); }
    25%, 45% { transform: translateX(-20%); }
    50%, 70% { transform: translateX(-40%); }
    75%, 95% { transform: translateX(-60%); }
    100% { transform: translateX(-80%); }
}
/* Knob layers (see .vn-fxv-br-knob): toolbar colour at 56%, 82%, 3% and 30% of the track … */
@keyframes vn-fxv-knob {
    0%, 20% { transform: translate(-44%, -50%); }
    25%, 45% { transform: translate(-18%, -50%); }
    50%, 70% { transform: translate(-97%, -50%); }
    75%, 95% { transform: translate(-70%, -50%); }
    100% { transform: translate(-44%, -50%); }
}
/* … background colour at 20%, 45%, 70% and 95% */
@keyframes vn-fxv-knob-bg {
    0%, 20% { transform: translate(-80%, -50%); }
    25%, 45% { transform: translate(-55%, -50%); }
    50%, 70% { transform: translate(-30%, -50%); }
    75%, 95% { transform: translate(-5%, -50%); }
    100% { transform: translate(-80%, -50%); }
}
/* The logo mark turns between diamond and square (225° looks like 45°) */
@keyframes vn-fxv-mark {
    0%, 20% { transform: rotate(45deg) scale(.8); }
    25%, 45% { transform: rotate(90deg) scale(.8); }
    50%, 70% { transform: rotate(135deg) scale(.8); }
    75%, 95% { transform: rotate(180deg) scale(.8); }
    100% { transform: rotate(225deg) scale(.8); }
}

/* secure sharing: the focus ring moves field by field, each digit appears as it is typed */
@keyframes vn-fxv-se-focus {
    0%, 23% { transform: translateX(calc(300% + 4.2cqi)); }
    29%, 37% { transform: translateX(0); }
    40%, 46% { transform: translateX(calc(100% + 1.4cqi)); }
    49%, 55% { transform: translateX(calc(200% + 2.8cqi)); }
    58%, 100% { transform: translateX(calc(300% + 4.2cqi)); }
}
@keyframes vn-fxv-se-digit-1 {
    0%, 22% { opacity: 1; transform: none; }
    25%, 32% { opacity: 0; transform: scale(.4); }
    35%, 100% { opacity: 1; transform: none; }
}
@keyframes vn-fxv-se-digit-2 {
    0%, 22% { opacity: 1; transform: none; }
    25%, 41% { opacity: 0; transform: scale(.4); }
    44%, 100% { opacity: 1; transform: none; }
}
@keyframes vn-fxv-se-digit-3 {
    0%, 22% { opacity: 1; transform: none; }
    25%, 50% { opacity: 0; transform: scale(.4); }
    53%, 100% { opacity: 1; transform: none; }
}
@keyframes vn-fxv-se-digit-4 {
    0%, 22% { opacity: 1; transform: none; }
    25%, 59% { opacity: 0; transform: scale(.4); }
    62%, 100% { opacity: 1; transform: none; }
}
@keyframes vn-fxv-se-btn {
    0%, 66%, 71%, 100% { transform: none; }
    68.5% { transform: scale(.96); }
}

/* reading mode: two half turns per loop (the icon looks the same after a full turn) */
@keyframes vn-fxv-rm-switch {
    0%, 20% { transform: translate(-50%, -50%) rotate(0); }
    32%, 70% { transform: translate(-50%, -50%) rotate(180deg); }
    82%, 100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* embed: the click at 30% */
@keyframes vn-fxv-em-press {
    0%, 28%, 32%, 100% { transform: none; }
    30% { transform: scale(.8); }
}
@keyframes vn-fxv-em-ripple {
    0%, 29.5% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    30.5% { opacity: .9; }
    36%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes vn-fxv-em-copy {
    0%, 29%, 34%, 100% { transform: none; }
    31% { transform: scale(.94); }
}
@keyframes vn-fxv-em-paste {
    0%, 38%, 50%, 100% { transform: none; }
    44% { transform: translateX(-1.2cqi); }
}
@keyframes vn-fxv-em-load {
    0%, 50% { opacity: 1; transform: none; }
    52% { opacity: .15; transform: scale(.96); }
    62%, 100% { opacity: 1; transform: none; }
}

/* public page: one cover after another (delays of a fifth of the loop) */
@keyframes vn-fxv-pp-lift {
    0%, 6%, 22%, 100% { transform: none; }
    11%, 17% { transform: translateY(-1.4cqi); }
}

/* analytics: rest on the last tooltip, redraw, hop over three days */
@keyframes vn-fxv-an-wipe {
    0%, 14% { opacity: 1; transform: none; }
    18% { opacity: 0; transform: none; }
    18.5% { opacity: 0; transform: translateX(-100%); }
    19% { opacity: 1; transform: translateX(-100%); }
    44%, 100% { opacity: 1; transform: none; }
}
/* the same keyframe times as vn-fxv-an-wipe, so the two transforms always cancel out */
@keyframes vn-fxv-an-wipe-in {
    0%, 18% { transform: none; }
    18.5%, 19% { transform: translateX(100%); }
    44%, 100% { transform: none; }
}
@keyframes vn-fxv-an-fade {
    0%, 14% { opacity: 1; }
    18%, 34% { opacity: 0; }
    48%, 100% { opacity: 1; }
}
@keyframes vn-fxv-an-tip-1 {
    0%, 52% { opacity: 0; }
    54%, 63% { opacity: 1; }
    65%, 100% { opacity: 0; }
}
@keyframes vn-fxv-an-tip-2 {
    0%, 64% { opacity: 0; }
    66%, 75% { opacity: 1; }
    77%, 100% { opacity: 0; }
}
@keyframes vn-fxv-an-tip-3 {
    0%, 13% { opacity: 1; }
    15%, 76% { opacity: 0; }
    78%, 100% { opacity: 1; }
}
@keyframes vn-fxv-an-meter {
    0%, 14% { transform: none; }
    18%, 22% { transform: scaleX(0); }
    44%, 100% { transform: none; }
}

@media print {
    .vn-fxv-stage { box-shadow: none; }
    .vn-fxv-stage *,
    .vn-fxv-stage *::before,
    .vn-fxv-stage *::after { animation: none !important; }
    .vn-fxv-toggle { display: none; }
}