/* Scoped demo chrome: never mounted into a skin or consumer site. */
.skin-gallery { box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.65rem; margin:0; padding:.85rem 1rem; width:100%; max-width:100%; background:#142329; color:#f2eee1; border:0; font:500 14px/1.5 system-ui,sans-serif; letter-spacing:normal; }
.skin-gallery a { display:inline-block; color:#f2eee1; background:transparent; border:1px solid #617b80; border-radius:6px; padding:.35rem .7rem; text-decoration:none; overflow-wrap:anywhere; font:inherit; }
.skin-gallery a:hover { color:#142329; background:#d8eee5; }
.skin-gallery a[aria-current] { color:#142329; background:#d8eee5; border-color:#d8eee5; }
.skin-gallery a:focus-visible, .gallery-index a:focus-visible { outline:3px solid #e8b86a; outline-offset:3px; }
.skin-gallery .skin-gallery-home { border-color:transparent; font-weight:750; }
.gallery-index { margin:0; background:#f3efe3; color:#1e3034; font:18px/1.6 system-ui,sans-serif; }
.gallery-index * { box-sizing:border-box; }
.gallery-index main { max-width:1080px; margin:auto; padding:clamp(24px,6vw,80px) 24px; }
.gallery-index h1 { font-size:clamp(2.5rem,7vw,5rem); line-height:1.08; letter-spacing:-.06em; margin:1rem 0 2rem; }
.gallery-index .gallery-eyebrow { font-size:.8rem; text-transform:uppercase; letter-spacing:.15em; }
.gallery-index .gallery-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:24px; margin:48px 0; }
.gallery-index .gallery-card { color:inherit; text-decoration:none; padding:32px; border:1px solid #a7b1a8; border-radius:12px; background:#fffdf5; }
.gallery-index .gallery-card:hover { border-color:#21635b; background:#e8f0e7; }
.gallery-index .gallery-card h2 { margin:0 0 16px; font-size:1.6rem; }
.gallery-index .gallery-card span { font-size:.9rem; color:#21635b; text-decoration:underline; }
.gallery-swatch { display:grid; gap:12px; margin:-12px -12px 24px; padding:24px; background:var(--preview-bg); color:var(--preview-fg); border-radius:3px; }
.gallery-swatch i { width:6px; height:6px; background:var(--preview-accent); }
.gallery-swatch b { font-weight:400; font-size:1.2rem; }
.gallery-swatch em { font-size:.75rem; font-style:normal; }
.gallery-index footer { margin-top:56px; border-top:1px solid #b7b9a8; padding-top:24px; font-size:.85rem; }
@media(max-width:380px) { .skin-gallery { gap:.4rem; font-size:12px; padding:.7rem .4rem; } .skin-gallery a { padding:.35rem .45rem; } }