body { font: 14px/1.5 system-ui,sans-serif; color: #292929; background: #fafaf8; }
.gallery-header { display: flex; justify-content: space-between; gap: 24px; padding: 24px; border-bottom: 1px solid #deded9; }
a { color: inherit; text-underline-offset: .2em; }
.gallery { max-width: 1100px; margin: auto; padding: 32px 24px; }
.gallery h1 { font-size: 32px; font-weight: 500; letter-spacing: -.03em; }
.gallery > p { max-width: 75ch; color: #62625e; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,393px),1fr)); gap: 32px 48px; margin-top: 40px; }
.gallery-item { min-width: 0; border-top: 1px solid #deded9; padding-top: 16px; }
.gallery-item > h2 { font-size: 18px; font-weight: 500; }
.gallery-item > p { font-size: 12px; color: #62625e; }
.gallery-example { width: 393px; max-width: none; padding: 16px; background: white; }
.gallery-stack { display: grid; gap: 12px; }
.gallery-controls { display: flex; gap: 16px; }
.gallery-token-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; list-style: none; }
.gallery-swatch { width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 6px; }
#gallery-status { padding: 16px 0; min-height: 50px; }

.gallery-viewport { max-width: 100%; overflow-x: auto; padding: 6px; margin: -6px; }
.gallery-viewport:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
.gallery-header { flex-wrap: wrap; }

.gallery-example .ld-brief-row .ld-row-copy > span { width: calc(100% + 10px); overflow: hidden; }

.gallery-state-control { display: grid; gap: 8px; }
.gallery-state-control select { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid #777; border-radius: 8px; background: white; color: inherit; }
.gallery-state-control select:focus-visible { outline: 2px solid #292929; outline-offset: 3px; }