/* Colour palettes. Every purple in the studio UI is derived from --hue / --sat. */
:root{--hue:275;--sat:1}
html[data-palette="violet"]{--hue:275;--sat:1}
html[data-palette="ocean"]{--hue:205;--sat:1}
html[data-palette="teal"]{--hue:174;--sat:.85}
html[data-palette="emerald"]{--hue:148;--sat:.8}
html[data-palette="amber"]{--hue:34;--sat:1}
html[data-palette="rose"]{--hue:340;--sat:1}
html[data-palette="crimson"]{--hue:356;--sat:.95}
html[data-palette="slate"]{--hue:215;--sat:.22}
.palette-section{margin-top:18px}
.palette-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.palette-chip{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:1px solid var(--border);background:#fff;border-radius:999px;font-size:12px;color:var(--ink)}
.palette-chip i{width:18px;height:18px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.palette-chip[aria-pressed="true"]{border-color:var(--purple);box-shadow:0 0 0 2px var(--purple) inset;font-weight:600}
.palette-chip[data-p="violet"] i{background:hsl(275 73% 48%)}.palette-chip[data-p="ocean"] i{background:hsl(205 73% 48%)}
.palette-chip[data-p="teal"] i{background:hsl(174 62% 40%)}.palette-chip[data-p="emerald"] i{background:hsl(148 58% 38%)}
.palette-chip[data-p="amber"] i{background:hsl(34 80% 48%)}.palette-chip[data-p="rose"] i{background:hsl(340 73% 52%)}
.palette-chip[data-p="crimson"] i{background:hsl(356 70% 46%)}.palette-chip[data-p="slate"] i{background:hsl(215 16% 40%)}