body.blg-page {
    margin: 0;
    padding: 0;
    background: var(--blg-background, #fff);
    color: var(--blg-text, #17201a);
}

#blg-root {
    --blg-line: #dfe3e1;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    color: var(--blg-text);
    background: var(--blg-background);
}
#blg-root *, #blg-root *::before, #blg-root *::after { box-sizing: border-box; }
#blg-root a { color: inherit; text-decoration: none; }
#blg-root a:focus-visible { outline: 3px solid var(--blg-primary); outline-offset: -3px; }
#blg-root.blg-has-socials { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
#blg-root .blg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px max(24px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--blg-line);
}
#blg-root .blg-brand { font: inherit; font-weight: 750; font-size: 26px; line-height: 1.2; margin: 0; min-width: 0; overflow-wrap: anywhere; }
#blg-root .blg-brand a { display: block; }
#blg-root .blg-logo { display: block; width: auto; height: 52px; max-width: min(360px, 58vw); object-fit: contain; }
#blg-root .blg-home {
    flex-shrink: 0;
    display: block;
    background: #fff;
    color: #17201a;
    border: 1px solid var(--blg-line);
    border-radius: 6px;
    padding: 10px 16px;
    min-height: 44px;
    max-width: 240px;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 650;
    text-align: center;
}
#blg-root .blg-home:hover { border-color: var(--blg-primary); }
#blg-root .blg-main { width: 100%; max-width: 1168px; margin: 0 auto; padding: 24px; outline: 0; }
#blg-root .blg-intro { margin: 0 0 20px; font-size: 16px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
#blg-root .blg-grid { display: grid; grid-template-columns: repeat(var(--blg-columns, 3), minmax(0, 1fr)); gap: 4px; }
#blg-root .blg-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #eef0ef; border-radius: 0; }
#blg-root .blg-tile img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; border: 0; border-radius: 0; transition: transform 160ms ease; }
#blg-root .blg-tile:hover img { transform: scale(1.025); }
#blg-root .blg-label { position: absolute; bottom: 8px; left: 8px; max-width: calc(100% - 16px); padding: 5px 8px; border-radius: 5px; background: var(--blg-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
#blg-root .blg-empty { padding: 72px 16px; text-align: center; }
#blg-root .blg-empty h2 { font: inherit; font-size: 22px; font-weight: 650; margin: 0; }
#blg-root .blg-socialbar { position: fixed; z-index: 100; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--blg-line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
#blg-root .blg-socialbar nav { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
#blg-root .blg-socialbar a { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 6px; }
#blg-root .blg-socialbar a:hover { background: #f0f2f1; }
#blg-root .blg-socialbar img { display: block; width: 32px; height: 32px; object-fit: contain; margin: 0; border: 0; }
#blg-root .blg-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 24px; font-size: 14px; }
#blg-root .blg-pagination a { padding: 10px 4px; text-decoration: underline; text-underline-offset: 4px; }
#blg-root .blg-skip { position: fixed; top: -120px; left: 12px; padding: 12px 20px; background: #fff; color: #17201a; z-index: 99999; }
#blg-root .blg-skip:focus { top: 40px; }
@media (max-width: 600px) {
    #blg-root .blg-header { flex-direction: column; gap: 16px; padding: 20px 16px; }
    #blg-root .blg-brand { width: 100%; text-align: center; font-size: 24px; }
    #blg-root .blg-brand a { display: flex; justify-content: center; }
    #blg-root .blg-logo { height: 44px; max-width: 100%; }
    #blg-root .blg-home { width: 100%; max-width: none; }
    #blg-root .blg-main { padding: 16px 0 24px; }
    #blg-root .blg-intro { padding: 0 16px; font-size: 14px; }
    #blg-root .blg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
    #blg-root .blg-label { left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 4px 6px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { #blg-root .blg-tile img { transition: none; } }
