/* The shared gallery stylesheet owns the brand, typography, header and footer. */
:root[data-page="gallery"] .guide-page .gallery-intro {padding-bottom:58px}
.guide-layout {display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;border-top:1px solid #d8e0ce;padding-top:40px}
.guide-sidebar {align-self:start;position:sticky;top:32px;font-size:12px;line-height:1.8}
.guide-sidebar nav {display:flex;flex-direction:column;gap:5px}
.guide-sidebar .gallery-eyebrow {margin-bottom:12px}
:root[data-page="gallery"] .guide-sidebar nav a {display:flex;gap:15px;padding:8px 0;color:#536647}
.guide-sidebar nav a span {font-size:10px;color:#8f9b82}
:root[data-page="gallery"] .guide-sidebar nav a:hover {color:#30372d;text-decoration:underline;text-underline-offset:5px}
.guide-sidebar>p {margin:28px 0 5px;color:#7c8b70;border-top:1px solid #d8e0ce;padding-top:22px}
:root[data-page="gallery"] .guide-docs-link {color:#536647;text-decoration:underline;text-underline-offset:4px}
.guide-content {min-width:0;max-width:940px}
.guide-section {scroll-margin-top:30px;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid #d8e0ce}
.guide-section:last-child {border:0;margin-bottom:0;padding-bottom:0}
.guide-section h2 {font-size:25px;font-weight:500;letter-spacing:-.6px;margin:0 0 14px}
.guide-section p:not(.gallery-eyebrow) {font-size:14px;line-height:1.85;color:#66745b;margin:0 0 20px}
.guide-section p code {font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#34492b;background:#eaf0e1;padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}
.guide-code {border:1px solid #d8e0ce;border-radius:9px;overflow:hidden;background:#edf2e6;margin-top:24px}
.guide-code-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #d8e0ce;padding:12px 20px;background:#f1f4eb}
.guide-code-heading>span {font-size:9px;letter-spacing:1.3px;color:#7c8b70}
:root[data-page="gallery"] .guide-code-heading button {font-size:11px;padding:6px 10px;background:#f8faf4}
.guide-code pre {margin:0;padding:24px;overflow:auto;color:#34492b;font:12px/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}
.guide-code pre:focus-visible {outline:2px solid #78935e;outline-offset:-3px}
.guide-copy-status {position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:1000px){.guide-layout{grid-template-columns:180px minmax(0,1fr);gap:30px}.guide-code pre{font-size:11px;padding:20px}}
@media(max-width:700px){.guide-layout{grid-template-columns:1fr;gap:30px;padding-top:28px}.guide-sidebar{position:static}.guide-sidebar nav{display:grid;grid-template-columns:1fr 1fr;gap:3px 15px}.guide-sidebar .gallery-eyebrow{grid-column:1/-1}.guide-sidebar>p,.guide-sidebar>.guide-docs-link{display:none}.guide-section h2{font-size:22px}.guide-section p:not(.gallery-eyebrow){font-size:13px}.guide-section{padding-bottom:30px;margin-bottom:30px}.guide-code-heading{padding:12px 16px}.guide-code pre{padding:18px 16px}}
@media(max-width:600px){:root[data-page="gallery"] .guide-page .gallery-header nav{gap:12px}:root[data-page="gallery"] .guide-page .gallery-header nav>a:not(.gallery-studio-link){display:none}:root[data-page="gallery"] .guide-page .gallery-intro{padding:42px 0 35px}}