.color-switcher { display: flex; flex-shrink: 0; align-items: center; gap: 2px; }
.color-swatch { width: 36px; height: 40px; padding: 7px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 6px; }
.color-swatch span { display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); border: 1px solid #0002; }
:root[data-mode="light"] {
    color-scheme: light; --ink: #28313a; --muted: #586574; --paper: #fff;
    --wash: #f5f6f7; --line: #dce1e5; --on-accent: #fff;
    --warn-bg: #f5ead5; --warn-text: #75531d; --danger: #a2342e;
}
:root[data-mode="dark"] {
    color-scheme: dark; --ink: #eceef2; --muted: #b4bbc5; --paper: #24282e;
    --wash: #191d22; --line: #414851; --on-accent: #171d24;
    --warn-bg: #443b2b; --warn-text: #efd39d; --danger: #ffb3a7;
}
:root[data-accent="slate"] { --light-accent: #4c5c6a; --dark-accent: #b0c2d1; --tint: #edf0f3; --dark-tint: #303b45; }
:root[data-accent="blue"] { --light-accent: #315f8b; --dark-accent: #98c5f2; --tint: #ebf1f7; --dark-tint: #293c50; }
:root[data-accent="green"] { --light-accent: #386554; --dark-accent: #9bd1b6; --tint: #edf3ef; --dark-tint: #2a4037; }
:root[data-accent="gold"] { --light-accent: #75603e; --dark-accent: #d4c09b; --tint: #f4f0e8; --dark-tint: #403a2f; }
:root[data-accent="rose"] { --light-accent: #915367; --dark-accent: #e4adbf; --tint: #f7edf1; --dark-tint: #49313c; }
:root[data-mode="light"] { --teal: var(--light-accent); --soft: var(--tint); }
:root[data-mode="dark"] { --teal: var(--dark-accent); --soft: var(--dark-tint); }
:root[data-mode] {
    --rail-bg: var(--paper); --rail-ink: var(--ink); --rail-muted: var(--muted);
    --rail-line: var(--line); --rail-active: var(--soft); --hero-start: var(--soft);
    --hero-end: var(--paper); --accent-hover: var(--teal);
}
.appearance-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mode-switcher { display: flex; border-left: 1px solid var(--line); padding-left: 8px; gap: 2px; }
.mode-switcher button { display: grid; place-items: center; width: 36px; height: 40px; padding: 7px; border: 1px solid transparent; background: transparent; }
.mode-switcher button[aria-pressed="true"] { color: var(--teal); background: var(--soft); border-color: var(--teal); }
.color-swatch[data-color="slate"] { --swatch: #728696; }
.color-swatch[data-color="blue"] { --swatch: #5a91c7; }
.color-swatch[data-color="green"] { --swatch: #62977b; }
.color-swatch[data-color="gold"] { --swatch: #b6a585; }
.color-swatch[data-color="rose"] { --swatch: #c5869c; }
.color-swatch[aria-pressed="true"] { background: var(--soft); }
.color-swatch[aria-pressed="true"] span { outline-color: var(--teal); }
.primary:hover { filter: brightness(.94); }
:root[data-accent="teal"] { --light-accent: #22696c; --dark-accent: #83cdd0; --tint: #eaf4f4; --dark-tint: #253f41; }
:root[data-accent="violet"] { --light-accent: #73548c; --dark-accent: #ccb0e6; --tint: #f3edf7; --dark-tint: #3b3048; }
:root[data-accent="copper"] { --light-accent: #895438; --dark-accent: #dfb095; --tint: #f7efe9; --dark-tint: #45362e; }
:root[data-accent="indigo"] { --light-accent: #4d5996; --dark-accent: #afb9ef; --tint: #eef0f9; --dark-tint: #30374c; }
:root[data-accent="olive"] { --light-accent: #626b35; --dark-accent: #c0cb8c; --tint: #f1f3e8; --dark-tint: #373d2c; }
.color-swatch[data-color="teal"] { --swatch: #429699; }
.color-swatch[data-color="violet"] { --swatch: #a181b9; }
.color-swatch[data-color="copper"] { --swatch: #bc886a; }
.color-swatch[data-color="indigo"] { --swatch: #7c88c1; }
.color-swatch[data-color="olive"] { --swatch: #939f61; }
#appearance-toggle { width: 36px; height: 36px; padding: 7px; display: grid; place-items: center; flex-shrink: 0; }
#appearance-panel { margin: 0; inset: auto; position: fixed; width: 274px; max-width: calc(100vw - 24px); padding: 16px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 36px #0003; }
#appearance-panel:not(:popover-open) { display: none; }
#appearance-panel:popover-open { display: grid; gap: 10px; }
#appearance-panel small { color: var(--muted); font-size: 12px; }
#appearance-panel .color-switcher { display: grid; grid-template-columns: repeat(5,1fr); }
#appearance-panel .color-swatch { width: 42px; height: 40px; }
#appearance-panel .mode-switcher { padding: 0; border: 0; display: grid; grid-template-columns: repeat(3,1fr); }
#appearance-panel .mode-switcher button { width: auto; height: 52px; gap: 2px; font-size: 11px; padding: 5px; }

#appearance-panel .icon,#appearance-toggle .icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
#appearance-panel button{color:var(--ink);font:inherit;cursor:pointer;border-radius:6px}
#appearance-panel button:focus-visible,#appearance-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
#appearance-panel .appearance-sync-note{line-height:1.5;font-size:11px}
.appearance-sync-actions{display:flex;gap:8px;flex-wrap:wrap}.appearance-sync-actions:empty{display:none}
#appearance-panel .appearance-sync-actions button{font-size:11px;padding:7px;background:var(--soft);border:1px solid var(--line)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}