/* shared look of the gallery pages (the kit's own css/kit.css + css/theme.css supply the tokens) */
html, body { margin: 0; background: var(--gf-bg, #10151c); color: var(--gf-text, #e8e8e8); font: 15px/1.8 var(--gf-font, system-ui, "Yu Gothic", "Hiragino Sans", sans-serif); }
.gal { max-width: 960px; margin: 0 auto; padding: calc(var(--lab-h, 48px) + 16px) 16px 64px; }
.gal h1 { font-size: 1.5rem; margin: 0 0 8px; color: var(--gf-heading, inherit); }
.gal .lead { margin: 0 0 16px; color: var(--gf-text-dim, #aab); }
.gal a { color: var(--gf-accent, #4fd6c8); }
.gal code, .mono { font-family: var(--gf-font-mono, ui-monospace, monospace); font-size: .9em; }
.ctrl { margin: 0 0 16px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cards li { background: var(--gf-surface, #1a2030); border: 1px solid var(--gf-border, #3a4660); border-radius: var(--gf-radius, 6px); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cards h2 { margin: 0; font-size: 1.05rem; color: var(--gf-heading, inherit); }
.cards p { margin: 0; color: var(--gf-text-dim, #aab); font-size: .9rem; }
.cards a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.cards button, .cards a.btn { margin-top: auto; align-self: flex-start; min-height: 44px; }
.result { margin: 16px 0; min-height: 1.8em; color: var(--gf-accent, #4fd6c8); }
pre { background: var(--gf-surface-2, #11151d); padding: 12px; overflow-x: auto; border-radius: 6px; font-size: .85rem; }
details { margin-top: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }