:root { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
.site-preferences, [data-preferences] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font:500 12px/1.4 system-ui,sans-serif; }
.site-preferences label, [data-preferences] label { display:flex; align-items:center; gap:6px; margin:0; }
.site-preferences select, [data-preferences] select { width:auto; min-height:40px; max-width:180px; border:1px solid currentColor; border-radius:8px; padding:6px 8px; background:Canvas; color:CanvasText; font:inherit; cursor:pointer; }
.site-preferences select:focus-visible, [data-preferences] select:focus-visible { outline:3px solid Highlight; outline-offset:3px; }
.site-logo { display:inline-block; width:40px; height:40px; flex-shrink:0; vertical-align:middle; margin-inline-end:8px; object-fit:contain; }
header:has(.site-preferences), header:has([data-preferences]) { flex-wrap:wrap; }
.preferences-settings { margin-block:24px; }
.preferences-settings .site-preferences { margin-block:16px; }
.preferences-settings .preferences-sharing { display:flex; align-items:center; gap:10px; margin-block:16px; }
.preferences-settings .preferences-sharing input { width:20px; height:20px; flex:0 0 20px; accent-color:Highlight; }
@media (max-width:700px) { .preferences-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); } .site-preferences, [data-preferences] { gap:6px; } }