.city-body-movies {
    --body-ink: var(--primary-color);
    color: var(--text-color);
    width: 100%;
    min-width: 0;
}

.city-body-movies .city-body-stage { position: relative; width: 100%; }
.city-body-movies .city-body-scene { display: block; width: 100%; height: 390px; overflow: visible; }
.city-body-movies .city-body-wall { fill: var(--surface-color); }
.city-body-movies .city-body-wall-edge { fill: none; stroke: var(--border-color); stroke-width: 1; }
.city-body-movies .city-body-rays { fill: none; stroke: var(--border-color); stroke-width: 1; stroke-dasharray: 3 6; opacity: .7; }
.city-body-movies .city-body-shadow-fill { fill: var(--primary-color); opacity: .13; }
.city-body-movies .city-body-light circle { fill: var(--primary-color); }
.city-body-movies .city-body-light path { fill: none; stroke: var(--primary-color); stroke-width: 1; }
.city-body-movies .city-body-person-0 { --body-person-color: var(--primary-color); }
.city-body-movies .city-body-person-1 { --body-person-color: color-mix(in srgb, var(--leaf-color) 68%, var(--text-color)); }
.city-body-movies .city-body-person-2 { --body-person-color: color-mix(in srgb, var(--sea-color) 65%, var(--text-color)); }
.city-body-movies .city-body-person-3 { --body-person-color: color-mix(in srgb, var(--accent-color) 65%, var(--text-color)); }
.city-body-movies .city-body-person-4 { --body-person-color: color-mix(in srgb, var(--sun-color) 46%, var(--text-color)); }
.city-body-movies .city-body-person { fill: var(--body-person-color); }
.city-body-movies .city-body-selection { fill: none; stroke: var(--body-person-color); stroke-width: 1.25; stroke-dasharray: 2 3; opacity: 0; }
.city-body-movies .city-body-person.is-focused .city-body-selection { opacity: 1; }
.city-body-movies .city-body-person.is-hovered > path,
.city-body-movies .city-body-person.is-focused > path { stroke: var(--body-person-color); stroke-width: 1.2; paint-order: stroke; }
.city-body-movies .city-body-person.is-focused > path { stroke-width: 2; }
.city-body-movies .city-body-targets { position: absolute; inset: 0; pointer-events: none; }
.city-body-movies .city-body-target {
    position: absolute;
    display: block;
    width: 48px;
    height: 67px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--body-person-color);
    pointer-events: auto;
    touch-action: none;
    cursor: grab;
    transform: translate(-50%, -100%);
    -webkit-tap-highlight-color: transparent;
}
.city-body-movies .city-body-target.is-dragging { cursor: grabbing; }
/* Focus is drawn around the actual figure and its footprint, never a tooltip box. */
.city-body-movies .city-body-target:focus-visible { outline: none; }
.city-body-movies .city-body-portrait { stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.city-body-movies .city-body-portrait-skin { fill: color-mix(in srgb, var(--sun-color) 18%, var(--surface-color)); stroke: var(--primary-color); }
.city-body-movies .city-body-portrait-shirt { fill: color-mix(in srgb, var(--sea-color) 18%, var(--surface-color)); stroke: var(--primary-color); }
.city-body-movies .city-body-portrait-1 .city-body-portrait-shirt,
.city-body-movies .city-body-portrait-4 .city-body-portrait-shirt { fill: color-mix(in srgb, var(--leaf-color) 22%, var(--surface-color)); }
.city-body-movies .city-body-portrait-3 .city-body-portrait-shirt { fill: color-mix(in srgb, var(--accent-color) 14%, var(--surface-color)); }
.city-body-movies .city-body-portrait-trousers { fill: color-mix(in srgb, var(--primary-color) 24%, var(--surface-color)); stroke: var(--primary-color); }
.city-body-movies .city-body-portrait-hair { fill: color-mix(in srgb, var(--primary-color) 62%, var(--surface-color)); stroke: var(--primary-color); }
.city-body-movies .city-body-portrait-details { fill: none; stroke: var(--primary-color); }
