/* Lightbox for Bricks. Square corners, no fonts set. */
.nll { display: contents; }
.nll-builder-note { margin: 0; padding: 0.5rem 0.75rem; outline: 1px dashed currentColor; outline-offset: -1px; font-size: 0.875rem; }
.nll-dialog {
    --nll-backdrop: rgb(0 0 0 / 0.9);
    --nll-ink: #fff;
    --nll-ui-bg: rgb(0 0 0 / 0.35);
    --nll-nav-width: 3rem;
    --nll-icon-size: 1.25rem;
    --nll-max-w: 90vw;
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--nll-backdrop);
    color: var(--nll-ink);
    overflow: hidden;
}
.nll-dialog:not([open]) { display: none; }
.nll-dialog::backdrop { background: transparent; }
.nll-stage {
    position: absolute;
    inset: 0;
    touch-action: pan-y;
}
.nll-slide { position: absolute; inset: 3.5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; pointer-events: none; }
.nll-slide > * { pointer-events: auto; }
.nll-slide img, .nll-slide video { display: block; max-width: var(--nll-max-w); max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; border-radius: 0; user-select: none; -webkit-user-drag: none; }
.nll-slide iframe { display: block; width: min(var(--nll-max-w), 70rem); aspect-ratio: 16 / 9; height: auto; max-height: calc(100dvh - 9rem); border: 0; background: #000; }
.nll-slide .nll-inline { max-width: min(var(--nll-max-w), 48rem); max-height: calc(100dvh - 9rem); overflow: auto; padding: 1.5rem; background: var(--white, #fff); color: var(--text-dark, #111); }
.nll-caption { margin: 0.75rem 1rem 0; max-width: min(var(--nll-max-w), 48rem); text-align: center; font-size: 0.9375rem; line-height: 1.4; color: var(--nll-ink); }
.nll-caption:empty { display: none; }
.nll-dialog[data-caption='overlay'] .nll-slide { position: relative; }
.nll-dialog[data-caption='overlay'] .nll-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; max-width: none; padding: 0.75rem 1rem; background: var(--nll-ui-bg); }
.nll-dialog[data-caption='none'] .nll-caption { display: none; }
.nll-btn {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--nll-nav-width);
    height: var(--nll-nav-width);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--nll-ui-bg);
    color: var(--nll-ink);
    font-size: var(--nll-icon-size);
    line-height: 1;
    cursor: pointer;
}
.nll-btn:hover { background: rgb(0 0 0 / 0.6); }
.nll-dialog .nll-btn:focus, .nll-dialog .nll-btn:focus-visible { outline: 0; }
.nll-dialog .nll-btn:focus-visible { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55); }
.nll-dialog .nll-btn:disabled { opacity: 0; pointer-events: none; }
.nll-btn svg { width: 1em; height: 1em; }
.nll-close { top: 0.75rem; right: 0.75rem; }
.nll-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
.nll-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
.nll-count { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.5rem 0.75rem; background: var(--nll-ui-bg); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.nll-dialog[data-single='1'] .nll-prev, .nll-dialog[data-single='1'] .nll-next, .nll-dialog[data-single='1'] .nll-count { display: none; }
.nll-dialog[data-dragging='1'] .nll-slide { cursor: grabbing; }
html.nll-lock { overflow: hidden; scrollbar-gutter: stable; }

.nll-dl, .nll-share { top: 0.75rem; }
.nll-dl { right: calc(0.75rem + var(--nll-nav-width) + 0.5rem); }
.nll-share { right: calc(0.75rem + 2 * (var(--nll-nav-width) + 0.5rem)); }
.nll-dl[hidden], .nll-share[hidden], .nll-thumbs[hidden] { display: none; }
.nll-dl:not([hidden]) ~ .nll-share:not([hidden]) { right: calc(0.75rem + 2 * (var(--nll-nav-width) + 0.5rem)); }
.nll-dl[hidden] ~ .nll-share:not([hidden]) { right: calc(0.75rem + var(--nll-nav-width) + 0.5rem); }
.nll-thumbs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: 0.5rem; justify-content: center; padding: 0.5rem 0.75rem; overflow-x: auto; background: var(--nll-ui-bg); }
.nll-thumbs button { flex: 0 0 auto; width: 4.5rem; height: 3rem; padding: 0; border: 2px solid transparent; border-radius: 0; background: rgb(255 255 255 / 0.1); color: var(--nll-ink); opacity: 0.6; cursor: pointer; overflow: hidden; }
.nll-thumbs button[aria-current='true'] { border-color: var(--nll-ink); opacity: 1; }
.nll-thumbs button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nll-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nll-dialog[data-thumbs='1'] .nll-slide { bottom: 4.5rem; }
.nll-dialog[data-zoomed='1'] .nll-slide img { max-width: none; max-height: none; }
.nll-slide img { transition: none; will-change: transform; touch-action: none; }
.nll-gallery { display: grid; grid-template-columns: repeat(var(--nll-cols, 3), 1fr); gap: var(--nll-gap, 0.5rem); }
.nll-gallery a { display: block; overflow: hidden; }
.nll-gallery img { display: block; width: 100%; height: auto; }
.nll-gallery[data-ratio] a { aspect-ratio: var(--nll-ratio); }
.nll-gallery[data-ratio] img { height: 100%; object-fit: cover; }
@media (max-width: 600px) { .nll-gallery { grid-template-columns: repeat(min(var(--nll-cols, 3), 2), 1fr); } }