/* Demo layout only; typography, colors, buttons, and spacing use theme.css. */
.anybokeh { scroll-margin-top: 100px; }
.anybokeh a:focus-visible, .anybokeh button:focus-visible, .anybokeh input:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}
.anybokeh-demo-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 23px;
}
.anybokeh-demo-heading i { margin-right: 9px; }
.anybokeh-images { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.anybokeh-images figure { position: relative; min-width: 0; margin: 0; }
.anybokeh-images img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.anybokeh-images figcaption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}
.anybokeh-images figcaption span { padding: 5px 10px; }
.anybokeh-controls {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    align-items: center;
    gap: 36px;
    padding: 23px;
}
.anybokeh-controls[hidden] { display: none; }
.anybokeh-control-label { display: block; margin: 0 0 10px; }
.anybokeh-focus-buttons { display: flex; gap: 6px; }
.anybokeh-focus button { min-width: 47px; min-height: 40px; }
.anybokeh-aperture label { display: flex; justify-content: space-between; }
.anybokeh-aperture input { display: block; width: 100%; height: 24px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.anybokeh-stops { display: flex; justify-content: space-between; margin-top: 5px; }
.anybokeh-hint { margin: 0; padding-left: 24px; border-left: 1px solid var(--gray); }
.anybokeh-caption { display: flex; justify-content: space-between; gap: 14px 30px; margin-top: 17px; }
.anybokeh-caption a { flex-shrink: 0; }
@media (max-width: 991px) {
    .anybokeh-controls { grid-template-columns: 1fr 1.3fr; gap: 24px; }
    .anybokeh-hint { display: none; }
}
@media (max-width: 767px) {
    .anybokeh-caption { flex-direction: column; gap: 8px; }
}
@media (max-width: 575px) {
    .anybokeh-demo-heading { padding: 14px 16px; }
    .anybokeh-demo-note { display: none; }
    .anybokeh-images { grid-template-columns: 1fr; }
    .anybokeh-images figcaption { right: 12px; bottom: 12px; left: 12px; }
    .anybokeh-controls { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .anybokeh-focus { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .anybokeh-focus .anybokeh-control-label { margin: 0; }
}