/* Distinct examples, with a consistent selected state. */
.example-chooser button[data-example="email"]{--example-rgb:112,208,245;--example-ink:#b4ebff}
.example-chooser button[data-example="chart"]{--example-rgb:170,140,244;--example-ink:#d4c1ff}
.example-chooser button[data-example="webpage"]{--example-rgb:74,211,171;--example-ink:#a1efcf}
.example-chooser button[data-example]{color:var(--example-ink);border-color:rgba(var(--example-rgb),.45);background:linear-gradient(145deg,rgba(var(--example-rgb),.15),rgba(var(--example-rgb),.045));box-shadow:inset 0 1px rgba(var(--example-rgb),.08);transition:background .18s,border-color .18s,box-shadow .18s}
.example-chooser button[data-example]:hover{border-color:rgba(var(--example-rgb),.8);background:rgba(var(--example-rgb),.2)}
.example-chooser button[data-example][aria-pressed="true"]{color:#f4fcff;border-color:rgba(var(--example-rgb),.95);background:linear-gradient(145deg,rgba(var(--example-rgb),.32),rgba(var(--example-rgb),.13));box-shadow:inset 0 -2px rgba(var(--example-rgb),.8),0 0 14px rgba(var(--example-rgb),.12)}
.example-chooser button[data-example]:focus-visible{outline-color:var(--example-ink)}
@media(prefers-reduced-motion:reduce){.example-chooser button[data-example]{transition:none}}