/* GENERATED by quilt/scripts/build-styleguide.mjs — the unified Sandman surface bar. Do not hand-edit. */
.sandman-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4, 16px); padding: var(--space-3, 12px) var(--space-5, 24px); background: var(--bg-raised, #15171b); border-bottom: 1px solid var(--border-default, #2a2d33); font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace); }
.sandman-nav .sn-current { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.sandman-nav .sn-current svg { display: block; flex: none; width: 22px; height: 22px; }
.sandman-nav .sn-word { font-size: var(--size-h3, 16px); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary, #e8e9ea); }
.sandman-nav .sn-switch { display: flex; align-items: center; gap: var(--space-4, 16px); flex-wrap: wrap; justify-content: flex-end; }
.sandman-nav .sn-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-muted, #7d8089); font-size: var(--size-small, 13px); transition: color 0.12s, opacity 0.12s; }
.sandman-nav .sn-link svg { display: block; flex: none; width: 15px; height: 15px; opacity: 0.8; transition: opacity 0.12s; }
.sandman-nav .sn-link:hover { color: var(--text-primary, #e8e9ea); }
.sandman-nav .sn-link:hover svg { opacity: 1; }
@media (max-width: 560px) { .sandman-nav .sn-link .sn-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }