.site-header { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 1.5rem; border-bottom: 1px solid var(--border-1, #e2e2e6); position: sticky; top: 0; background: var(--bg-canvas, #fff); z-index: 10; }
.site-logo { font-weight: 700; text-decoration: none; color: inherit; }
.site-nav { display: flex; gap: 1rem; flex: 1; }
.site-nav a { text-decoration: none; color: inherit; opacity: .8; }
.site-switchers { display: flex; gap: .5rem; align-items: center; }
.site-main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.site-main pre { overflow-x: auto; padding: 1rem; border-radius: .5rem; background: var(--bg-muted, #f4f4f6); }
.demo { border: 1px dashed var(--border-1, #e2e2e6); border-radius: .5rem; padding: 1.5rem; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Minimal top bar for full-screen reference pages (site/screens/*.html).
   Deliberately smaller than .site-header: back link + theme/palette switchers only,
   so the ported screen can be seen at full width like it would in a real app. */
.screen-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.25rem; border-bottom: 1px solid var(--border-1, #e2e2e6); background: var(--bg-canvas, #fff); position: sticky; top: 0; z-index: 10; }
.screen-topbar-back { text-decoration: none; color: inherit; font-weight: 700; font-size: .9rem; }