/* GENERATED from design/appearance/appearance.css by design/syncDesign.mjs --write. Do not edit here: edit design/ and run --write. */
/* THE APPEARANCE CONTROL (design/appearance/appearance.js, Appearance.mount): a three-way segmented control, System | Light | Dark. It reads only the shared tokens, so it is the same in every app and in both themes. */
.ap-seg { display: flex; width: 100%; max-width: 360px; height: var(--bar-height, 21px); min-height: 36px; padding: 3px; border-radius: 14px; background: var(--surface-2); gap: 2px; box-sizing: border-box; }
.ap-seg button { flex: 1 1 0; min-width: 0; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-size: var(--type-lead, 14px); font-weight: 400; cursor: pointer; transition: background .1s ease-in-out, color .1s ease-in-out; }
.ap-seg button[aria-checked="true"] { background: rgba(var(--ink-rgb), .08); color: var(--ink); }
.ap-seg button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ap-seg + .hero-cap, .ap-seg + .nw-footnote { margin-top: 14px; }