.city-optik {
    position: relative;
    color: var(--text-color);
    padding-block: 0.25rem 0.5rem;
}

.city-optik-scene {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.city-optik-scene path,
.city-optik-scene ellipse {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.city-optik-distant,
.city-optik-world,
.city-optik-ground {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.15;
}

.city-optik-distant { opacity: 0.19; }
.city-optik-world { opacity: 0.25; }
.city-optik-ground { opacity: 0.20; }
.city-optik-ground ellipse { fill: currentColor; stroke: none; opacity: 0.12; }

.city-optik-plinth {
    fill: var(--background-color);
    stroke: currentColor;
    stroke-width: 1.15;
    stroke-opacity: 0.5;
}

.city-optik-rim-edge {
    fill: none;
    stroke: currentColor;
    stroke-width: 10;
    stroke-opacity: 0.53;
}

.city-optik-rim-face {
    fill: none;
    stroke: var(--background-color);
    stroke-width: 7.3;
}

.city-optik-gimbal .city-optik-rim-edge { stroke-width: 8.5; }
.city-optik-gimbal .city-optik-rim-face { stroke-width: 6; }
.city-optik-film-rim.city-optik-rim-edge { stroke-width: 8; }
.city-optik-film-rim.city-optik-rim-face { stroke-width: 5.6; }

.city-optik-fixed-axle,
.city-optik-moving-axle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    opacity: 0.6;
}

.city-optik-film { stroke: none; }
.city-optik-refraction { fill: none; stroke: var(--primary-color); stroke-width: 1.4; }
.city-optik-refraction use { opacity: 0.54; }
.city-optik-sheen { fill: var(--background-color); fill-opacity: 0.25; stroke: none; }

.city-optik-light {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 1.5;
    stroke-dasharray: 1 30;
    opacity: 0.35;
}

.city-optik-person {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    opacity: 0.68;
}

.city-optik-person-body,
.city-optik-person-head { fill: var(--background-color); }

/* Only the actual moving hoop and membrane consume a touch gesture. */
.city-optik-grab {
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.city-optik-grab [data-optik-hit-ring],
.city-optik-grab [data-optik-hit-frame] {
    fill: none;
    stroke: transparent;
    stroke-width: 30;
    pointer-events: stroke;
}

.city-optik-grab [data-optik-hit-film] {
    fill: transparent;
    stroke: none;
    pointer-events: fill;
}

.city-optik[data-dragging="true"] .city-optik-grab { cursor: grabbing; }

/* The native button follows the sculpture's bounds for focus and scrolling.
   Pointer events stay on the real SVG ring and membrane. */
.city-optik-keyboard {
    position: absolute;
    inset-block-start: 7.9%;
    inset-inline-start: 32.2%;
    inline-size: 33.6%;
    block-size: 74.6%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    pointer-events: none;
}

.city-optik-keyboard:focus-visible { outline: none; }

.city-optik-focus-ring {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 1.75;
    stroke-dasharray: 3 7;
    opacity: 0;
    pointer-events: none;
}

.city-optik:has(.city-optik-keyboard:focus-visible) .city-optik-focus-ring { opacity: 0.85; }

.city-optik-gimbal .city-optik-rim-edge,
.city-optik-light { transition: stroke-opacity 140ms ease-out, opacity 140ms ease-out; }

.city-optik:has(.city-optik-grab:hover) .city-optik-gimbal .city-optik-rim-edge,
.city-optik:has(.city-optik-keyboard:focus-visible) .city-optik-gimbal .city-optik-rim-edge { stroke-opacity: 0.73; }

.city-optik:has(.city-optik-grab:hover) .city-optik-light,
.city-optik:has(.city-optik-keyboard:focus-visible) .city-optik-light { opacity: 0.65; }

.city-optik-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .city-optik-scene { aspect-ratio: 490 / 405; }
    .city-optik-keyboard {
        inset-inline-start: 16.3%;
        inline-size: 61.6%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .city-optik-gimbal .city-optik-rim-edge,
    .city-optik-light { transition: none; }
}