.zi-viewport {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
}

.zi-surface {
    position: relative;
    transform-origin: 0 0; /* Panzoom relies on this */
    user-select: none;
}

.zi-img {
    display: block;
    pointer-events: none; /* clicks go to surface */
    max-width: none;      /* don't let browser shrink it */
}

.zi-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    font-size: 28px;      /* icon size */
    color: dodgerblue;
    cursor: pointer;
    pointer-events: auto; /* clickable */
}

.zi-alert {
    color: red;
}

.zi-toolbar {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    gap: .25rem;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blink {
    animation: blink 1s infinite;
}