#image-frame {
    box-sizing: border-box;
    border-radius: 24px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px var(--shadow-color);
    padding: 8px;
    overflow: hidden;
    transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .45s ease;
}
#image-frame img {
    display: block;
    max-width: min(82vw, 640px);
    max-height: 62vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease;
}
/* Hovering expands the frame and image a bit */
#image-frame:hover {
    transform: scale(1.06);
    box-shadow: 0 28px 70px var(--shadow-color);
}
/* Selected state: top-left only while the page is at the top. It is absolute,
   not fixed/sticky, so it naturally scrolls away with the page content. */
#image-frame.selected {
    position: absolute;
    margin: 0;
    z-index: 10000; /* below the header (10007) / banner (10005) */
    box-shadow: 0 12px 34px var(--shadow-color);
}