:root{color:#1f2937;background:#f3f4f6;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color-scheme:light;transition:color .2s ease,background-color .2s ease}:root[data-color-mode=dark]{color:#e5e7eb;background:#111827;color-scheme:dark}body{width:100%;margin:0;padding:0}#examples{display:grid;gap:24px}section{display:grid;gap:12px}h1,h2{margin:0}main>h1,main>p,.theme-switcher{margin-left:24px;margin-right:24px}main>h1{margin-top:24px}main>p{margin-top:8px}.theme-switcher{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;margin-bottom:24px;padding:12px 14px;border:1px solid #d1d5db;border-radius:10px;background:#fff;transition:border-color .2s ease,background-color .2s ease}.theme-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.theme-switcher>div:first-child{display:grid;gap:3px}.theme-switcher strong{color:#111827;font-size:.875rem}.theme-switcher span{color:#6b7280;font-size:.75rem}.theme-swatches{display:flex;flex-wrap:wrap;gap:6px}.theme-swatch{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 9px;border:1px solid transparent;border-radius:7px;color:#374151;background:transparent;cursor:pointer;font:inherit;font-size:.75rem}.theme-swatch:hover{background:#f3f4f6}.theme-swatch[aria-checked=true]{border-color:#9ca3af;background:#f3f4f6;box-shadow:0 0 0 2px #fff,0 0 0 3px #9ca3af}.theme-swatch-dot{width:16px;height:16px;border:1px solid rgb(0 0 0 / .14);border-radius:50%;box-shadow:inset 3px 0 #ffffff42}.theme-mode-icon{width:16px;text-align:center;font-size:1rem;line-height:1}:root[data-color-mode=dark] .theme-switcher{border-color:#4b5563;background:#1f2937}:root[data-color-mode=dark] .theme-switcher strong{color:#f9fafb}:root[data-color-mode=dark] .theme-switcher span{color:#9ca3af}:root[data-color-mode=dark] .theme-swatch{color:#d1d5db}:root[data-color-mode=dark] .theme-swatch:hover,:root[data-color-mode=dark] .theme-swatch[aria-checked=true]{background:#374151}:root[data-color-mode=dark] .theme-swatch[aria-checked=true]{border-color:#9ca3af;box-shadow:0 0 0 2px #1f2937,0 0 0 3px #9ca3af}section>div{min-width:0}.example-status{margin:0;color:#4b5563;font-size:.875rem}:root[data-color-mode=dark] .example-status{color:#9ca3af}