/* Only the three City at Play miniatures. Global editorial typography stays shared. */
.city-at-play-page .city-case-heading { width: min(82%, 760px); }
.city-at-play-page .city-issue-right .city-case-heading { margin-left: auto; }
.city-at-play-page .city-case-open[hidden],
.city-at-play-page [data-swing-rider][hidden] { display: none; }
.city-at-play-page .city-case-open { border-radius: 2px; left: 78px; }
.city-at-play-page .city-playable.is-open .city-case-open { pointer-events: auto; }
.city-at-play-page .city-case-article { padding-top: 7px; font-size: 12px; color: var(--muted-color); text-decoration: none; }
.city-at-play-page .city-case-article:hover { color: var(--primary-color); }
.city-at-play-page .city-playfield {
    width: calc(100% - 88px); margin: 20px 0 0 88px; padding-top: 30px;
    scroll-margin-top: 40px;
}
.city-at-play-page .city-playfield-toolbar {
    top: -12px; right: 0; display: flex; opacity: 0; transition: opacity 180ms ease-out;
}
.city-at-play-page .city-playfield:hover .city-playfield-toolbar,
.city-at-play-page .city-playfield:focus-within .city-playfield-toolbar { opacity: .7; }
.city-at-play-page .city-playfield-toolbar:focus-within { opacity: 1; }
.city-scene-icon {
    display: grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0;
    color: var(--muted-color); background: transparent; font: inherit; font-size: 17px; cursor: pointer;
}
.city-scene-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.city-sound-muted, .city-sound-toggle[aria-pressed="false"] .city-sound-wave { display: none; }
.city-sound-toggle[aria-pressed="false"] .city-sound-muted { display: initial; }
.city-at-play-page button:focus-visible,
.city-at-play-page select:focus-visible,
.city-at-play-page input:focus-visible,
.city-at-play-page summary:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
.city-swings-stage { position: relative; }
.city-swings-scene { display: block; width: 100%; height: auto; overflow: visible; }
.city-swings-scene path, .city-swings-scene circle {
    fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.city-swings-ground { color: var(--border-color); }
.city-swings-frame-back { color: var(--primary-color); opacity: .23; }
.city-swings-frame-front { color: var(--primary-color); opacity: .4; }
.city-swings-top-ties { color: var(--primary-color); opacity: .32; }
.city-swings-rail { color: var(--primary-color); opacity: .4; }
.city-swings-scene .city-swings-footings {
    fill: var(--background-color);
    color: var(--primary-color); stroke-opacity: .23; stroke-width: 1;
}
.city-swings-contacts { color: var(--primary-color); opacity: .32; }
.city-swings-scene .city-swings-joints circle { color: var(--primary-color); fill: var(--background-color); stroke-opacity: .32; stroke-width: 1; }
.city-swings .city-swing { color: var(--primary-color); }
.city-swings .city-swing-rope { opacity: .6; }
.city-swings .city-swing-anchor { fill: var(--background-color); }
.city-swings .city-swing-seat { stroke-width: 2.5; }
.city-swings .city-swing.is-hovered .city-swing-seat { stroke-width: 3.5; }
.city-swings .city-swing-rider { color: var(--text-color); }
.city-swings .city-swing-rider circle { fill: var(--background-color); }
.city-swings .city-swing-rider path { stroke-width: 1.7; }
.city-swing-targets { position: absolute; inset: 0; pointer-events: none; }
.city-swing-target {
    position: absolute; width: 46px; height: 62px; padding: 0; border: 0;
    transform: translate(-50%, -68%); background: transparent; color: var(--primary-color);
    cursor: grab; touch-action: none; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.city-swing-target:active { cursor: grabbing; }
.city-swing-target:focus-visible { border-radius: 50%; }
.city-swings .city-swing-music { color: var(--accent-color); opacity: 0; pointer-events: none; }
.city-swings .city-swing-music ellipse { fill: currentColor; }
.city-swings .city-swing-music.is-sounding { animation: city-note-response 650ms ease-out both; }
@keyframes city-note-response { 0% { opacity: .9; translate: 0 0; } 100% { opacity: 0; translate: 0 -8px; } }
@media (max-width: 600px) {
    .city-at-play-page .city-case-heading { width: 92%; }
    .city-at-play-page .city-case-open { left: 54px; }
    .city-at-play-page .city-playfield { width: 100%; margin: 14px 0 0; padding-top: 34px; }
    .city-at-play-page .city-playfield-toolbar { top: -4px; }
    .city-swings-scene { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
    .city-at-play-page .city-playfield { animation: none; }
    .city-swings .city-swing-music.is-sounding { animation: none; opacity: .85; }
}