@rogieking/figui3 11.6.1 → 11.6.3

package/.cursor/skills/fig-editor/components.md

@@ -124,10 +124,11 @@ Authored trailing accessory (`/figui3#property/custom-accessory`):
 </fig-property>
 ```
 
-- Attrs: `label`, `leading` (`drag` | `chevron`), `trailing` (`remove` | `add` | `bind`), `show-leading`, `show-trailing`
+- Attrs: `label`, `leading` (`drag` | `chevron`), `trailing` (`remove` | `add` | `bind`), `show-leading`, `show-trailing`, `selected`
 - Slots: `input` (one direct primary control), `label`, `leading`, `trailing`
 - Authored label markup overrides the `label` attribute.
 - Authored accessory slots override generated shortcuts.
+- `selected` and `selected="true"` use the selected background; `selected="false"` does not.
 - Omitted or `"hover"` show attributes use hover visibility; `"false"` never shows the slot; an empty/present attribute always shows it.
 - Generated trailing controls emit bubbling, composed `remove`, `add`, or `bind` events with the slotted control in `detail.input`.
 - Child input events bubble unchanged.
@@ -163,8 +164,10 @@ Reusable ordered palette editor used by `fig-input-palette edit="picker"`.
 />
 ```
 
-- Attrs: `value`, `min`, `max`, `fixed`, `disabled`
+- Attrs: `value`, `min`, `max`, `fixed`, `disabled`, `overflow="fade|visible"`, `show-rows`
 - `max` is unbounded when omitted.
+- Overflow defaults to 6.5 rows with vertical fades; `show-rows` maps to `--fig-palette-editor-overflow-show-rows`, and `visible` shows every row.
+- Additions use shared OKLCH utilities to choose a deterministic, perceptually distinct color that matches the palette.
 - Events: `input` / `change` with the normalized ordered color array in `detail`
 - Uses `fig-reorder` for pointer and keyboard reordering.
 
@@ -180,7 +183,9 @@ Reusable full gradient editor used by the Gradient tab in `fig-fill-picker`.
 />
 ```
 
-- Attrs: `value`, `color-space` (`srgb` | `display-p3`), `disabled`.
+- Attrs: `value`, `color-space` (`srgb` | `display-p3`), `disabled`, `overflow="fade|visible"`, `show-rows`.
+- Stop overflow defaults to 6.5 rows with vertical fades; `show-rows` maps to `--fig-gradient-editor-overflow-show-rows`, and `visible` shows every stop.
+- Stop row and bar-handle selection stay synchronized and scroll the selected row into view. The first stop starts selected. Add Stop inserts midway after the selected row, then selects and focuses the new row.
 - Property: `value` is the normalized gradient config; `cssValue` is the rendered CSS gradient.
 - Property: `pickerAnchor` accepts an element used to anchor nested stop color pickers.
 - Events: `input` / `change` with `{ type: "gradient", gradient, css }`.
@@ -201,7 +206,7 @@ Reusable popup containing one `fig-gradient-editor`. It is the picker opened by
 ></dialog>
 ```
 
-- Attrs: `value`, `color-space`, `disabled`, plus inherited `fig-popup` attributes.
+- Attrs: `value`, `color-space`, `disabled`, `overflow`, `show-rows`, plus inherited `fig-popup` attributes.
 - Events: bubbling `input` / `change` with `{ type: "gradient", gradient, css }`.
 - Create it as `<dialog is="fig-popup-gradient">`.
 
@@ -220,7 +225,7 @@ Reusable palette dialog used by `fig-input-palette edit="picker"`. It extends
 ></dialog>
 ```
 
-- Attrs: `value`, `min`, `max`, `fixed`, `disabled`, plus inherited `fig-popup` attributes.
+- Attrs: `value`, `min`, `max`, `fixed`, `disabled`, `overflow`, `show-rows`, plus inherited `fig-popup` attributes.
 - Property: `value` returns the normalized `{ color, alpha }[]`.
 - Events: bubbling `input` / `change` with the normalized color array in `detail`.
 - Create it as `<dialog is="fig-popup-palette">`, not `<fig-popup-palette>`.

package/.cursor/skills/fig-editor/reference.md

@@ -54,6 +54,7 @@ Events: `input`, `change`, `optionhover`, `optionfocus`.
 - `leading`: `drag` or `chevron`
 - `trailing`: `remove`, `add`, or `bind`
 - `show-leading` / `show-trailing`: omitted or `hover` reveals on hover, `false` hides, and an empty attribute always shows
+- `selected`: present or `true` uses `--figma-color-bg-selected`; `false` leaves the row unselected
 - Authored accessory slots override generated shortcuts.
 - `input` returns the direct `slot="input"` element.
 - Generated labels associate to the input with `aria-labelledby` unless it already has an accessible name.
@@ -81,26 +82,31 @@ Events: `input`, `change`, `optionhover`, `optionfocus`.
 
 ## Palette editor
 
-`fig-palette-editor` observes `value`, `min`, `max`, `fixed`, and `disabled`. An omitted `max` allows unlimited colors.
+`fig-palette-editor` observes `value`, `min`, `max`, `fixed`, `disabled`, `overflow`, and `show-rows`. An omitted `max` allows unlimited colors.
 
 - `value`: JSON array of hex strings or `{ color, alpha }` objects, or comma-separated hex
 - `value` property and `input` / `change` event `detail`: normalized ordered `{ color, alpha }[]`
+- `overflow="fade|visible"`: defaults to a bounded list with vertical fades; `visible` shows every row.
+- `show-rows`: defaults to `6.5` and maps to `--fig-palette-editor-overflow-show-rows`.
 - Rows are direct `fig-reorder` items and support pointer or keyboard reordering.
 
 ## Gradient editor
 
-`fig-gradient-editor` observes `value`, `color-space`, and `disabled`.
+`fig-gradient-editor` observes `value`, `color-space`, `disabled`, `overflow`, and `show-rows`.
 
 - `value` accepts a gradient config or `{ type: "gradient", gradient }` and returns a normalized gradient config.
 - `cssValue` returns the current CSS gradient.
 - `pickerAnchor` anchors nested stop color pickers.
+- `overflow="fade|visible"`: stop rows default to a bounded list with vertical fades; `visible` shows every stop.
+- `show-rows`: defaults to `6.5` and maps to `--fig-gradient-editor-overflow-show-rows`.
 - Bubbling `input` / `change` detail is `{ type: "gradient", gradient, css }`.
 - Interpolation remains locked to sRGB to match the fill picker’s current behavior.
 
 ## Gradient popup
 
 `dialog[is="fig-popup-gradient"]` extends `fig-popup`, owns a
-`fig-gradient-editor`, and observes `value`, `color-space`, and `disabled`.
+`fig-gradient-editor`, and observes `value`, `color-space`, `disabled`,
+`overflow`, and `show-rows`.
 
 - Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.
 - Bubbling `input` / `change` detail is `{ type: "gradient", gradient, css }`.
@@ -109,7 +115,7 @@ Events: `input`, `change`, `optionhover`, `optionfocus`.
 
 `dialog[is="fig-popup-palette"]` extends `fig-popup`, owns a
 `fig-palette-editor`, and observes `value`, `min`, `max`, `fixed`, and
-`disabled` in addition to inherited popup attributes.
+`disabled`, `overflow`, and `show-rows` in addition to inherited popup attributes.
 
 - `value` property and bubbling `input` / `change` detail are normalized `{ color, alpha }[]`.
 - Defaults: `position="bottom left"`, `offset="0 8"`, `viewport-margin="8"`, and `popover="manual"`.

package/.cursor/skills/figui3/reference.md

@@ -2,6 +2,14 @@
 
 Public API: `README.md`. React recipes: [components.md](components.md).
 
+## Color utilities
+
+Import pure color math from `@rogieking/figui3/fig-color.js`.
+
+- RGB channels: `0–255`; HSL/HSV percentages: `0–100`; OKLab/OKLCH lightness: `0–1`; hue: normalized degrees.
+- Supports sRGB and true Display-P3 conversion, OKLab distance, hue interpolation, gamut testing, and OKLCH chroma-reduction gamut mapping.
+- Achromatic OKLCH colors use hue `0`.
+
 ## Option string formats
 
 

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to this project will be documented in this file.
 
+## [11.6.3]
+
+### Added
+
+- Added keyboard selection and deletion for palette colors and gradient stops.
+
+### Fixed
+
+- Preserved normal Delete and Backspace editing inside color and position inputs.
+- Supported macOS Backspace deletion while respecting minimum, fixed, and disabled editor constraints.
+
+## [11.6.2]
+
+### Added
+
+- Added shared `fig-color.js` color parsing, conversion, interpolation, contrast, and palette-generation utilities.
+- Added `overflow` and `show-rows` controls for palette and gradient editor stop lists.
+- Added selected-state styling and playground controls for `fig-property`.
+
+### Changed
+
+- Refactored palette and gradient editors to synchronize mounted controls and rows in place, preserving focus, popups, drag state, and controlled-value feedback.
+- Extracted the palette editor into dedicated source and stylesheet modules.
+- Improved palette additions with deterministic, harmonious OKLCH colors.
+- Synchronized gradient stop row and handle selection, scrolled selections into view, and inserted new stops after the selected stop.
+- Expanded editor playground examples, controls, tests, and skill documentation.
+
+### Fixed
+
+- Prevented semantically equivalent editor updates from replacing active controls or interrupting pointer interactions.
+- Kept gradient stop selection singular and stable across adding, removing, reordering, and external updates.
+
 ## [11.6.1]
 
 ### Changed

package/README.md

@@ -715,7 +715,7 @@ The editable palette is a single tab stop. Enter or Space expands inline mode or
 
 `<fig-property>`
 
-An editor-bundle property row. Supply one control in `slot="input"` and optionally author `slot="label"`, `slot="leading"`, or `slot="trailing"` content. Authored label markup takes precedence over the `label` attribute. The `leading="drag|chevron"` and `trailing="remove|add|bind"` attributes generate common accessories; authored slot content takes precedence. Leading and trailing content appears on hover or focus by default. Set `show-leading="false"` or `show-trailing="false"` to hide it, or add an empty `show-leading` or `show-trailing` attribute to always show it. Generated trailing actions emit bubbling, composed events named `remove`, `add`, or `bind` with the slotted control in `detail.input`. Input events bubble directly from the supplied control.
+An editor-bundle property row. Supply one control in `slot="input"` and optionally author `slot="label"`, `slot="leading"`, or `slot="trailing"` content. Authored label markup takes precedence over the `label` attribute. The `leading="drag|chevron"` and `trailing="remove|add|bind"` attributes generate common accessories; authored slot content takes precedence. Leading and trailing content appears on hover or focus by default. Set `show-leading="false"` or `show-trailing="false"` to hide it, or add an empty `show-leading` or `show-trailing` attribute to always show it. Add `selected` or `selected="true"` for the selected background; `selected="false"` leaves the row unselected. Generated trailing actions emit bubbling, composed events named `remove`, `add`, or `bind` with the slotted control in `detail.input`. Input events bubble directly from the supplied control.
 
 ```html
 <fig-property label="Size" leading="drag" trailing="remove">
@@ -725,11 +725,26 @@ An editor-bundle property row. Supply one control in `slot="input"` and optional
 
 Import `fig-property.js` and `fig-property.css` directly, or use the `fig-editor` bundle, which includes both.
 
+#### Color Utilities
+
+`fig-color.js` is a side-effect-free color math entry point shared by core and editor components.
+
+```js
+import {
+  figHexToOklch,
+  figOklchToHex,
+  figOklabDistance,
+  figMapOklchToGamut,
+} from "@rogieking/figui3/fig-color.js";
+```
+
+RGB channels use `0–255`; HSL/HSV saturation, lightness, and value use `0–100`; OKLab/OKLCH lightness uses `0–1`, chroma is unbounded, and hue uses normalized degrees. Achromatic colors return hue `0`. `figHexToRGB()` returns alpha and `figRGBToHex()` accepts optional alpha; color-space conversion otherwise leaves alpha to the caller. Converters support `colorSpace: "srgb" | "display-p3"`, and `figMapOklchToGamut()` reduces chroma while preserving lightness and hue.
+
 #### Palette Editor
 
 `<fig-palette-editor>`
 
-A reusable editor-bundle component for ordered color arrays. It uses `<fig-reorder>` for pointer and keyboard reordering and emits normalized color arrays from `input` and `change`. It supports `value`, `min`, `max`, `fixed`, and `disabled`; omit `max` for an unlimited number of colors.
+A reusable editor-bundle component for ordered color arrays. It uses `<fig-reorder>` for pointer and keyboard reordering and emits normalized color arrays from `input` and `change`. New colors are selected deterministically in OKLCH to remain perceptually distinct while matching the palette’s lightness and chroma. It supports `value`, `min`, `max`, `fixed`, `disabled`, `overflow="fade|visible"`, and `show-rows`; omit `max` for an unlimited number of colors. Overflow defaults to a bounded list showing 6.5 rows with vertical fades. Set `show-rows` to change that height or use `overflow="visible"` to show every row. `show-rows` maps to `--fig-palette-editor-overflow-show-rows`.
 
 ```html
 <fig-palette-editor value='["#94BD00","#83AD00","#1A632A","#003905"]'></fig-palette-editor>
@@ -740,9 +755,15 @@ A reusable editor-bundle component for ordered color arrays. It uses `<fig-reord
 `<fig-gradient-editor>`
 
 A reusable editor-bundle component for gradient type, direction, stop handles,
-and reorderable stop rows. It supports `value`, `color-space`, and `disabled`;
-its `value` property is the normalized gradient config. Bubbling `input` and
-`change` events include `{ type, gradient, css }`.
+and reorderable stop rows. It supports `value`, `color-space`, `disabled`,
+`overflow="fade|visible"`, and `show-rows`. Stops default to a bounded list
+showing 6.5 rows with vertical fades; `show-rows` maps to
+`--fig-gradient-editor-overflow-show-rows`, and `overflow="visible"` shows every
+stop. Stop row and bar-handle selection stay synchronized and scroll the
+selected row into view. The first stop is selected initially. Selecting another
+row makes Add Stop insert midway between it and the following stop; the new stop
+is selected and focused. Its `value` property is the normalized gradient config.
+Bubbling `input` and `change` events include `{ type, gradient, css }`.
 
 ```html
 <fig-gradient-editor
@@ -757,8 +778,8 @@ its `value` property is the normalized gradient config. Bubbling `input` and
 `<dialog is="fig-popup-gradient">`
 
 A reusable `fig-popup` subclass that owns a `<fig-gradient-editor>`. It
-supports `value`, `color-space`, and `disabled`, plus inherited popup
-positioning. Its bubbling `input` and `change` events include
+supports `value`, `color-space`, `disabled`, `overflow`, and `show-rows`, plus
+inherited popup positioning. Its bubbling `input` and `change` events include
 `{ type, gradient, css }`.
 
 ```html

package/dist/fig-color.js

@@ -0,0 +1 @@
+var k=new Set(["srgb","display-p3"]);var m={srgb:[[0.4123907992659595,0.35758433938387796,0.1804807884018343],[0.21263900587151036,0.7151686787677559,0.07219231536073371],[0.01933081871559185,0.11919477979462599,0.9505321522496607]],"display-p3":[[0.4865709486482162,0.26566769316909306,0.1982172852343625],[0.2289745640697488,0.6917385218365064,0.079286914093745],[0,0.04511338185890264,1.043944368900976]]},G={srgb:[[3.2409699419045226,-1.537383177570094,-0.4986107602930034],[-0.9692436362808796,1.8759675015077202,0.04155505740717559],[0.05563007969699366,-0.20397695888897652,1.0569715142428786]],"display-p3":[[2.493496911941425,-0.9313836179191239,-0.40271078445071684],[-0.8294889695615747,1.7626640603183465,0.023624685841943577],[0.03584583024378447,-0.07617238926804182,0.9568845240076872]]};function b(n){return k.has(n)?n:"srgb"}function l(n,t,e){return Math.max(t,Math.min(e,Number(n)||0))}function p(n,t){return n.map((e)=>e[0]*t[0]+e[1]*t[1]+e[2]*t[2])}function g(n){let t=n/255;return t<=0.04045?t/12.92:((t+0.055)/1.055)**2.4}function M(n){return n<=0.0031308?12.92*n:1.055*Math.max(n,0)**0.4166666666666667-0.055}function T(n,t,e){return[g(n),g(t),g(e)]}function S(n,{clip:t=!0}={}){let e=n.map((o)=>M(o)*255),r=t?e.map((o)=>l(o,0,255)):e;return{r:Math.round(r[0]),g:Math.round(r[1]),b:Math.round(r[2])}}function I(n,t,e,r){return p(m[b(r)],T(n,t,e))}function x(n,t){return p(G[b(t)],n)}function y(n,t,e){let r=Math.cbrt(0.4122214708*n+0.5363325363*t+0.0514459929*e),o=Math.cbrt(0.2119034982*n+0.6806995451*t+0.1073969566*e),s=Math.cbrt(0.0883024619*n+0.2817188376*t+0.6299787005*e);return{l:0.2104542553*r+0.793617785*o-0.0040720468*s,a:1.9779984951*r-2.428592205*o+0.4505937099*s,b:0.0259040371*r+0.7827717662*o-0.808675766*s}}function B(n,t,e){let r=n+0.3963377774*t+0.2158037573*e,o=n-0.1055613458*t-0.0638541728*e,s=n-0.0894841775*t-1.291485548*e,a=r**3,u=o**3,i=s**3;return[4.0767416621*a-3.3077115913*u+0.2309699292*i,-1.2684380046*a+2.6097574011*u-0.3413193965*i,-0.0041960863*a-0.7034186147*u+1.707614701*i]}function N(n,t,e,r){let o=B(n,t,e);if(b(r)==="srgb")return o;let s=p(m.srgb,o);return x(s,r)}function L(n){return n.every((t)=>t>=-0.0000001&&t<=1.0000001)}function h(n){let t=Number(n);if(!Number.isFinite(t))return 0;return(t%360+360)%360}function H(n){let t=String(n??"").trim().replace(/^#/,"");if(t.length===3||t.length===4)t=[...t].map((e)=>e.repeat(2)).join("");if(!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(t))throw TypeError(`Invalid hex color: ${n}`);return{r:parseInt(t.slice(0,2),16),g:parseInt(t.slice(2,4),16),b:parseInt(t.slice(4,6),16),a:t.length===8?parseInt(t.slice(6,8),16)/255:1}}function E(n,t,e,r=1){let o=[n,t,e].map((a)=>Math.round(l(a,0,255)).toString(16).padStart(2,"0")),s=l(r,0,1);if(s<1)o.push(Math.round(s*255).toString(16).padStart(2,"0"));return`#${o.join("").toUpperCase()}`}function V(n){return g(l(n,0,255))}function X(n){return Math.round(l(M(Number(n)),0,1)*255)}function $(n,t,e,{from:r="srgb",to:o="srgb",clip:s=!0}={}){let a=b(r),u=b(o);if(a===u){let c=s?[n,t,e].map((f)=>l(f,0,255)):[Number(n),Number(t),Number(e)];return{r:c[0],g:c[1],b:c[2]}}let i=I(n,t,e,a);return S(x(i,u),{clip:s})}function C(n,t,e,{colorSpace:r="srgb"}={}){let o=T(n,t,e);if(b(r)==="display-p3"){let s=p(m["display-p3"],o);o=x(s,"srgb")}return y(...o)}function P(n,t,e,{colorSpace:r="srgb",clip:o=!0}={}){return S(N(n,t,e,r),{clip:o})}function z(n,t,e){let r=Math.sqrt(t*t+e*e);return{l:n,c:r,h:r<0.0000001?0:h(Math.atan2(e,t)*180/Math.PI)}}function R(n,t,e){let r=h(e)*Math.PI/180;return{l:Number(n),a:Number(t)*Math.cos(r),b:Number(t)*Math.sin(r)}}function v(n,t,e,r){let o=C(n,t,e,r);return z(o.l,o.a,o.b)}function _(n,t,e,r={}){let o=r.gamutMap===!0?w(n,t,e,r):{l:n,c:t,h:e},s=R(o.l,o.c,o.h);return P(s.l,s.a,s.b,r)}function j(n){let{r:t,g:e,b:r}=H(n);return v(t,e,r)}function q(n,t,e,r={}){let{r:o,g:s,b:a}=_(n,t,e,{...r,gamutMap:r.gamutMap!==!1});return E(o,s,a)}function A(n,t,e){let r=l(n,0,255)/255,o=l(t,0,255)/255,s=l(e,0,255)/255,a=Math.max(r,o,s),u=Math.min(r,o,s),i=a-u,c=0;if(i!==0)if(a===r)c=60*((o-s)/i%6);else if(a===o)c=60*((s-r)/i+2);else c=60*((r-o)/i+4);let f=(a+u)/2,O=i===0?0:i/(1-Math.abs(2*f-1));return{h:h(c),s:O*100,l:f*100}}function F(n,t,e){let r=h(n),o=l(t,0,100)/100,s=l(e,0,100)/100,a=(1-Math.abs(2*s-1))*o,u=r/60,i=a*(1-Math.abs(u%2-1)),c;if(u<1)c=[a,i,0];else if(u<2)c=[i,a,0];else if(u<3)c=[0,a,i];else if(u<4)c=[0,i,a];else if(u<5)c=[i,0,a];else c=[a,0,i];let f=s-a/2;return{r:Math.round((c[0]+f)*255),g:Math.round((c[1]+f)*255),b:Math.round((c[2]+f)*255)}}function Y(n,t,e){let r=l(n,0,255)/255,o=l(t,0,255)/255,s=l(e,0,255)/255,a=Math.max(r,o,s),u=Math.min(r,o,s),i=a-u,c=0;if(i!==0)if(a===r)c=60*((o-s)/i%6);else if(a===o)c=60*((s-r)/i+2);else c=60*((r-o)/i+4);return{h:h(c),s:a===0?0:i/a*100,v:a*100}}function Z(n,t,e){let r=h(n),o=l(t,0,100)/100,s=l(e,0,100)/100,a=s*o,u=r/60,i=a*(1-Math.abs(u%2-1)),c;if(u<1)c=[a,i,0];else if(u<2)c=[i,a,0];else if(u<3)c=[0,a,i];else if(u<4)c=[0,i,a];else if(u<5)c=[i,0,a];else c=[a,0,i];let f=s-a;return{r:Math.round((c[0]+f)*255),g:Math.round((c[1]+f)*255),b:Math.round((c[2]+f)*255)}}function D(n,t,e,r="shorter"){let o=h(n),a=h(t)-o;switch(r){case"longer":if(a>0&&a<180)a-=360;else if(a<0&&a>-180)a+=360;break;case"increasing":if(a<0)a+=360;break;case"decreasing":if(a>0)a-=360;break;default:if(a>180)a-=360;else if(a<-180)a+=360;break}return h(o+a*Number(e))}function K(n,t){return Math.sqrt((Number(n?.l)-Number(t?.l))**2+(Number(n?.a)-Number(t?.a))**2+(Number(n?.b)-Number(t?.b))**2)}function d(n,t,e,{colorSpace:r="srgb"}={}){let o=R(n,t,e);return L(N(o.l,o.a,o.b,r))}function w(n,t,e,{colorSpace:r="srgb"}={}){let o=l(n,0,1),s=Math.max(0,Number(t)||0),a=h(e);if(d(o,s,a,{colorSpace:r}))return{l:o,c:s,h:a};let u=0,i=s;for(let c=0;c<24;c+=1){let f=(u+i)/2;if(d(o,f,a,{colorSpace:r}))u=f;else i=f}return{l:o,c:u,h:a}}export{v as figRGBToOklch,C as figRGBToOklab,V as figRGBToLinear,Y as figRGBToHsv,A as figRGBToHsl,E as figRGBToHex,_ as figOklchToRGB,R as figOklchToOklab,q as figOklchToHex,P as figOklabToRGB,z as figOklabToOklch,K as figOklabDistance,h as figNormalizeHue,w as figMapOklchToGamut,X as figLinearToSRGB,d as figIsOklchInGamut,D as figInterpolateHue,Z as figHsvToRGB,F as figHslToRGB,H as figHexToRGB,j as figHexToOklch,$ as figConvertRGB};

package/dist/fig-editor.css

@@ -1 +1 @@
-fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}fig-gradient-editor{width:100%;min-width:0;display:block;& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-3) var(--spacer-3) 0;background:0 0;overflow:visible;&:after{display:none}}& fig-header.fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{flex:none}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header>span{flex:1}}& .fig-fill-picker-gradient-stops-list{flex-direction:column;display:flex;& fig-reorder{display:contents}}& .fig-fill-picker-gradient-stop-row{&.dragging{background-color:var(--figma-color-bg-selected)}& .fig-fill-picker-gradient-stop-inputs{width:100%;min-width:0}& .fig-fill-picker-stop-position{flex:0 0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}}dialog[is=fig-popup-easing]{pointer-events:auto;width:12rem;min-width:0;padding:0;padding:0 var(--spacer-2-5)}dialog[is=fig-popup-gradient]{pointer-events:auto;width:15rem;min-width:0;padding:0;& .fig-gradient-editor-content{padding-top:var(--spacer-1)}}dialog[is=fig-popup-palette]{pointer-events:auto;width:12rem;min-width:0;padding:0}fig-input-point{width:8.9375rem;display:inline-flex;&[full]:not([full=false]){width:100%}&>fig-input-combo{width:100%;&>fig-input-number{flex:1 1 0;width:auto}}}:root,:host{--icon-24-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E")}fig-interpolation-swatch{width:1.5rem;height:1.5rem;color:var(--figma-color-bordertranslucent);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible;&[size=large]{width:2rem;height:2rem;& .fig-interpolation-swatch-svg,& .fig-interpolation-swatch-fill{width:1.25rem;height:1.25rem}}& .fig-interpolation-swatch-svg{width:1rem;height:1rem;display:block;overflow:visible}& .fig-interpolation-swatch-fill{background:linear-gradient(90deg,red,#4f9eff);width:1rem;height:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}dialog[is=fig-toast]{--fig-toast-bg-color:var(--figma-color-bg);--z-index:999999;z-index:var(--z-index);box-shadow:var(--figma-elevation-100);border-radius:var(--radius-large);padding:var(--spacer-2) var(--spacer-3);align-items:center;gap:var(--spacer-2-5);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--fig-toast-bg-color);flex-wrap:nowrap;justify-content:center;&[icon]{&>fig-icon:first-child{margin-inline:calc(var(--spacer-2) * -1)}}&>fig-spinner:first-child{margin-inline:calc(var(--spacer-2) * -1)}&[open]:not([open=false]){flex-direction:row;display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}&>fig-separator[data-fig-toast-dismiss-separator]{--fig-separator-color:var(--figma-color-bordertranslucent);flex:none;align-self:stretch;margin:0}& fig-button:last-child{margin-inline:calc(var(--spacer-2) * -1);margin-left:calc(var(--spacer-1) * -1)}&>fig-icon[data-fig-toast-icon]{--size:var(--spacer-4);flex:none}&>fig-button[data-fig-toast-dismiss]{flex:none}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=danger]{background-color:var(--figma-color-bg-danger);color-scheme:dark}&[theme=brand]{background-color:var(--figma-color-bg-brand);color-scheme:dark}&[theme=success]{background-color:var(--figma-color-bg-success);color-scheme:dark}}fig-palette-editor{flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:contents}& .fig-palette-editor-add{width:100%}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{width:240px;padding:0;&>fig-content{padding-bottom:var(--spacer-2-5);padding-top:var(--spacer-2)}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-tab:is([data-tab=solid],[data-tab=gradient]){& fig-preview{overflow:visible}}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:3}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;row-gap:var(--spacer-2);column-gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-mode{flex:unset;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not([slot=leading]):not([slot=trailing]):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-preview fig-button,& fig-input-file fig-button{visibility:hidden}&:hover{& fig-preview fig-button,& fig-input-file fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}fig-select{min-width:0;height:var(--spacer-4);border-radius:var(--radius-medium);background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:inset 0 0 0 1px var(--figma-color-border);align-items:center;display:inline-flex;position:relative;&[size=large]{height:var(--spacer-5)}&[full]:not([full=false]){width:100%;display:flex}&[icon]:not([icon=false]){--fig-select-icon-size:var(--spacer-4);flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);&[size=large]{--fig-select-icon-size:var(--spacer-5)}&::part(trigger){flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);justify-content:center;padding:0}&::part(label),&::part(prepend){display:none}&:after{left:50%;right:auto;transform:translate(-50%,-50%)}}&[disabled]:not([disabled=false]){pointer-events:none;color:var(--figma-color-text-tertiary);&:after{background-color:var(--figma-color-icon-disabled)}}&[variant=ghost]{box-shadow:none;background-color:#0000;&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){background-color:var(--figma-color-bg-secondary)}}&[variant=input]{box-shadow:none;background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text);&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-transparent)}&:active:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text)}&:focus-within{background-color:var(--figma-color-bg-secondary)}}&[open]:not([open=false]){color:var(--figma-color-text-selected);background-color:var(--figma-color-bg-selected);box-shadow:none;&:after{background-color:var(--figma-color-icon-selected)}}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-16-chevron);background-color:var(--figma-color-icon);pointer-events:none;z-index:1;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}fig-select::part(listbox){--z-index:999999;--fig-popup-radius:var(--radius-large);--fig-popup-bg-color:var(--figma-color-bg-menu);z-index:var(--z-index);border-radius:var(--fig-popup-radius);background-color:var(--fig-popup-bg-color);color:var(--figma-color-text-menu);color-scheme:dark;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0;height:max-content;max-height:calc(100vh - 1rem);margin:0;padding:0;position:fixed;overflow:hidden}fig-select-options>:is(fig-separator,fig-menu-separator){&[label]:not([label=""]){--fig-menu-inline-padding:var(--spacer-3);--fig-separator-padding-inline:var(--spacer-3,.75rem);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{max-width:100%;color:var(--figma-color-text-menu);user-select:none;text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden;& h3,& label{text-overflow:ellipsis;overflow:hidden}&>fig-icon[data-fig-select-checkmark]{margin:0 var(--spacer-1);visibility:hidden;order:-1}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary)}fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false])>fig-icon[data-fig-select-checkmark],&[aria-selected=true]>fig-icon[data-fig-select-checkmark]{visibility:visible}}fig-reorder{display:contents;&:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]{cursor:grab;&>fig-header,&>fig-header *,&>label{cursor:grab}}&>.dragging{background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}}[data-reorder-handle]{cursor:grab}body.fig-reorder-dragging{&,& *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}}.fig-reorder-indicator{pointer-events:none;z-index:1000000;border-radius:1px;position:fixed;&:before{content:"";background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute;top:0;left:0}&.fig-reorder-indicator-ring{&[data-axis=vertical]:before{left:var(--spacer-1);width:calc(100% - var(--spacer-1))}&[data-axis=horizontal]:before{top:var(--spacer-1);height:calc(100% - var(--spacer-1))}&:after{content:"";width:var(--spacer-2);height:var(--spacer-2);border:2px solid var(--figma-color-border-selected);border-radius:50%;position:absolute;top:1px;left:0;transform:translate(-50%,-50%)}&[data-axis=horizontal]:after{top:0;left:1px}}&[data-axis=vertical]{height:2px}&[data-axis=horizontal]{width:2px}}
+fig-layer{--indent:var(--spacer-3);color:var(--figma-color-text);user-select:none;width:100%;padding:0 var(--spacer-3);border-radius:var(--radius-medium);display:block;position:relative}fig-layer:has(fig-layer)>.fig-layer-row>.fig-layer-chevron{visibility:visible}fig-layer>.fig-layer-row{align-items:center;gap:var(--spacer-1);padding:var(--spacer-1) var(--spacer-2);height:var(--spacer-4);border-radius:var(--radius-medium);display:flex;position:relative}fig-layer>.fig-layer-row .fig-layer-chevron{mask-image:var(--icon-16-chevron);visibility:hidden;background:var(--figma-color-text-tertiary);width:var(--spacer-3);height:var(--spacer-3);left:calc(var(--spacer-3) * -1);top:var(--spacer-1);flex-shrink:0;transition:transform .15s;display:flex;position:absolute;rotate:-90deg;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}fig-layer>.fig-layer-row:hover{background:var(--figma-color-bg-secondary)}fig-layer>.fig-layer-row:hover .fig-layer-actions{opacity:1}fig-layer>.fig-layer-row .fig-layer-icon{width:var(--spacer-3);height:var(--spacer-3);color:var(--figma-color-icon-tertiary);margin-left:calc(var(--spacer-1) * -1);flex-shrink:0}fig-layer>.fig-layer-row>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}fig-layer .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex}fig-layer .fig-layer-actions>*{flex-shrink:0}fig-layer>fig-layer{margin-top:1px;padding:0}fig-layer>fig-layer .fig-layer-row{padding-left:var(--indent)}fig-layer:not([open])>fig-layer,fig-layer[open=false]>fig-layer{display:none}fig-layer[open]:not([open=false])>.fig-layer-row>.fig-layer-chevron{rotate:0deg}fig-layer[visible=false]>.fig-layer-row>label{color:var(--figma-color-text-tertiary)}fig-layer[selected]:not([selected=false])>.fig-layer-row{background:var(--figma-color-bg-selected)}fig-layer[selected]:not([selected=false])>.fig-layer-row>.fig-layer-icon{color:var(--figma-color-icon)}fig-property{--fig-property-gap:var(--spacer-2);--fig-property-left-padding:var(--spacer-3);--fig-property-right-padding:var(--spacer-3);--fig-property-top-padding:var(--spacer-1);--fig-property-bottom-padding:var(--spacer-1);--fig-property-label-ratio:1fr;--fig-property-input-ratio:2fr;--fig-property-trailing-gap:0;--fig-property-trailing-size:0;grid-template-columns:var(--fig-property-left-padding) var(--fig-property-label-track,minmax(0, var(--fig-property-label-ratio))) minmax(0, var(--fig-property-input-ratio)) var(--fig-property-trailing-gap) var(--fig-property-trailing-size) var(--fig-property-right-padding);width:100%;min-width:0;padding:var(--fig-property-top-padding) 0 var(--fig-property-bottom-padding);grid-template-areas:"leading label input.trailing pad";align-items:start;margin:0;display:grid;&[selected]:not([selected=false]){background-color:var(--figma-color-bg-selected)}&[show-trailing]:not([show-trailing=hover]):has(>fig-button[slot=trailing][variant=ghost]),&[show-trailing]:not([show-trailing=hover]):has(>[slot=trailing] fig-button[variant=ghost]){--fig-property-right-padding:var(--spacer-2)}&>:is(label,[slot=label]){min-width:0;height:min(100%, var(--spacer-4));margin-right:var(--fig-property-gap);font:inherit;text-overflow:ellipsis;white-space:nowrap;user-select:none;grid-area:label;align-content:center;padding:0;line-height:1rem;display:block;overflow:hidden}&>[slot=leading]{visibility:hidden;height:100%;color:var(--figma-color-text-secondary);grid-area:leading}&:has(>[slot=trailing]){--fig-property-label-track:minmax(0, calc(( 100% - var(--fig-property-left-padding) - var(--fig-property-right-padding) ) / 3))}&>[slot=input]{grid-area:input;width:100%;min-width:0}&>[slot=trailing]{visibility:hidden;grid-area:trailing;min-width:0;overflow:hidden}&:hover>[slot=leading],&:hover>[slot=trailing],&[show-leading]:not([show-leading=hover]):not([show-leading=false])>[slot=leading],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{visibility:visible}&:hover:has(>[slot=trailing]):not([show-trailing=false]),&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false]){--fig-property-trailing-gap:var(--fig-property-gap);--fig-property-trailing-size:max-content}&:hover>[slot=trailing],&[show-trailing]:not([show-trailing=hover]):not([show-trailing=false])>[slot=trailing]{overflow:visible}&[show-leading=false]>[slot=leading],&[show-trailing=false]>[slot=trailing]{display:none}&:not(:has(>:is(label,[slot=label])))>[slot=input]{grid-column:label-start/input-end}}fig-gradient-editor{--fig-gradient-editor-overflow-show-rows:6.5;width:100%;min-width:0;display:block;& .fig-fill-picker-gradient-preview{aspect-ratio:auto;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-3) var(--spacer-3) 0;background:0 0;overflow:visible;&:after{display:none}}& fig-header.fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:0 auto;width:auto;min-width:0;display:flex}& .fig-fill-picker-gradient-actions{flex:none}}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header>span{flex:1}}& .fig-fill-picker-gradient-stops-list{flex-direction:column;display:flex;& fig-reorder{display:block!important}& fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-gradient-editor-overflow-show-rows) * 2rem)}}& .fig-fill-picker-gradient-stop-row{&.dragging{background-color:var(--figma-color-bg-selected)}& .fig-fill-picker-gradient-stop-inputs{width:100%;min-width:0}& .fig-fill-picker-stop-position{flex:0 0 3rem;width:3rem;min-width:0}& .fig-fill-picker-stop-color{flex:1;min-width:0;& fig-input-text{min-width:0}}& .fig-fill-picker-stop-remove{flex-shrink:0}}}fig-palette-editor{--fig-palette-editor-overflow-show-rows:6.5;flex-direction:column;width:100%;min-width:0;display:flex;&>fig-reorder{display:block!important}&>fig-reorder.fig-overflow-fade{max-height:calc(var(--fig-palette-editor-overflow-show-rows) * 2rem)}& .fig-palette-editor-add{width:100%}}dialog[is=fig-popup-easing]{pointer-events:auto;width:12rem;min-width:0;padding:0;padding:0 var(--spacer-2-5)}dialog[is=fig-popup-gradient]{pointer-events:auto;width:15rem;min-width:0;padding:0;& .fig-gradient-editor-content{padding-top:var(--spacer-1)}}dialog[is=fig-popup-palette]{pointer-events:auto;width:12rem;min-width:0;padding:0}fig-input-point{width:8.9375rem;display:inline-flex;&[full]:not([full=false]){width:100%}&>fig-input-combo{width:100%;&>fig-input-number{flex:1 1 0;width:auto}}}:root,:host{--icon-24-eyedropper:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E")}fig-interpolation-swatch{width:1.5rem;height:1.5rem;color:var(--figma-color-bordertranslucent);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:visible;&[size=large]{width:2rem;height:2rem;& .fig-interpolation-swatch-svg,& .fig-interpolation-swatch-fill{width:1.25rem;height:1.25rem}}& .fig-interpolation-swatch-svg{width:1rem;height:1rem;display:block;overflow:visible}& .fig-interpolation-swatch-fill{background:linear-gradient(90deg,red,#4f9eff);width:1rem;height:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}dialog[is=fig-toast]{--fig-toast-bg-color:var(--figma-color-bg);--z-index:999999;z-index:var(--z-index);box-shadow:var(--figma-elevation-100);border-radius:var(--radius-large);padding:var(--spacer-2) var(--spacer-3);align-items:center;gap:var(--spacer-2-5);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--fig-toast-bg-color);flex-wrap:nowrap;justify-content:center;&[icon]{&>fig-icon:first-child{margin-inline:calc(var(--spacer-2) * -1)}}&>fig-spinner:first-child{margin-inline:calc(var(--spacer-2) * -1)}&[open]:not([open=false]){flex-direction:row;display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}&>fig-separator[data-fig-toast-dismiss-separator]{--fig-separator-color:var(--figma-color-bordertranslucent);flex:none;align-self:stretch;margin:0}& fig-button:last-child{margin-inline:calc(var(--spacer-2) * -1);margin-left:calc(var(--spacer-1) * -1)}&>fig-icon[data-fig-toast-icon]{--size:var(--spacer-4);flex:none}&>fig-button[data-fig-toast-dismiss]{flex:none}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=danger]{background-color:var(--figma-color-bg-danger);color-scheme:dark}&[theme=brand]{background-color:var(--figma-color-bg-brand);color-scheme:dark}&[theme=success]{background-color:var(--figma-color-bg-success);color-scheme:dark}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}.fig-fill-picker-dialog{width:240px;padding:0;&>fig-content{padding-bottom:var(--spacer-2-5);padding-top:var(--spacer-2)}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}& .fig-fill-picker-close{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-tab:is([data-tab=solid],[data-tab=gradient]){& fig-preview{overflow:visible}}& .fig-fill-picker-color-area{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3);&>:not(fig-handle){border-radius:inherit;place-self:center;width:100%;height:100%}& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:3}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;row-gap:var(--spacer-2);column-gap:var(--spacer-2);padding-bottom:var(--spacer-1);grid-template-rows:1fr 1fr;display:grid;& .fig-fill-picker-eyedropper{margin-right:calc(var(--spacer-3) * -1);aspect-ratio:1;grid-area:1/1/3;place-self:center;width:3.5rem;height:3.5rem}& fig-slider{grid-column:2;min-width:0}&.is-hue-only{grid-template-rows:1fr;& .fig-fill-picker-eyedropper{width:auto;height:var(--spacer-4);aspect-ratio:auto;grid-row:1}}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-mode{flex:unset;align-self:center;width:3.5rem}& .fig-fill-picker-input-fields{width:100%;min-width:0;display:flex;& .input-combo{flex:1;min-width:0;& fig-input-number>input,& fig-input-text:not(.fig-fill-picker-ci-hex)>input{text-align:center;padding-inline:0}}& fig-input-text{flex:1;min-width:0}& .fig-fill-picker-ci-css{font-variant-numeric:tabular-nums}& .fig-fill-picker-ci-hex-row{& .fig-fill-picker-ci-hex{flex:auto;min-width:0}& .fig-fill-picker-ci-a{flex:0 0 3rem}}& .fig-fill-picker-ci-a{flex:0 0 2.75rem;min-width:2.75rem}}}& fig-field.fig-fill-picker-media-header{grid-template-columns:unset;grid-template-areas:unset;padding-left:var(--spacer-3);padding-right:var(--spacer-2);justify-content:space-between;align-items:center;gap:var(--spacer-2);display:flex;&>:not([slot=leading]):not([slot=trailing]):not(label){grid-area:unset}& .fig-fill-picker-scale-mode{flex:none;width:4.5rem}& .fig-fill-picker-scale{flex:none;width:56px}& .fig-fill-picker-media-rotate{flex-shrink:0;margin-left:auto}}& .fig-fill-picker-media-preview{width:calc(100% - var(--spacer-3) * 2);margin:var(--spacer-2) var(--spacer-3) var(--spacer-1);border-radius:var(--radius-medium);position:relative;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-preview fig-button,& fig-input-file fig-button{visibility:hidden}&:hover{& fig-preview fig-button,& fig-input-file fig-button{visibility:visible}}}}& fig-image.fig-fill-picker-media-preview{aspect-ratio:1;justify-content:center;align-items:center;display:flex;overflow:hidden}& .fig-fill-picker-checkerboard{background-image:linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(-45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%), linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;position:absolute;inset:0}& div.fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& fig-image.fig-fill-picker-image-preview{width:auto;max-width:none;max-height:none}& video.fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& fig-media.fig-fill-picker-video-preview{aspect-ratio:unset;max-width:none;max-height:none;width:calc(100% - var(--spacer-3) * 2);align-items:stretch;gap:var(--spacer-2);flex-direction:column;display:flex;overflow:visible;&>fig-preview{aspect-ratio:1;border-radius:var(--radius-medium);width:100%;max-width:none;overflow:hidden}}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);max-width:none;max-height:none;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin:var(--spacer-2) var(--spacer-3);display:flex;position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%}& .fig-fill-picker-webcam-status{background:var(--figma-color-bg-secondary);color:var(--figma-color-text-secondary);justify-content:center;align-items:center;font-size:.75rem;display:flex;position:absolute;inset:0}& .fig-fill-picker-webcam-controls{padding:0 var(--spacer-3);gap:var(--spacer-1);display:flex;& .fig-fill-picker-webcam-capture{width:100%}}}fig-select{min-width:0;height:var(--spacer-4);border-radius:var(--radius-medium);background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:inset 0 0 0 1px var(--figma-color-border);align-items:center;display:inline-flex;position:relative;&[size=large]{height:var(--spacer-5)}&[full]:not([full=false]){width:100%;display:flex}&[icon]:not([icon=false]){--fig-select-icon-size:var(--spacer-4);flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);&[size=large]{--fig-select-icon-size:var(--spacer-5)}&::part(trigger){flex:0 0 var(--fig-select-icon-size);width:var(--fig-select-icon-size);justify-content:center;padding:0}&::part(label),&::part(prepend){display:none}&:after{left:50%;right:auto;transform:translate(-50%,-50%)}}&[disabled]:not([disabled=false]){pointer-events:none;color:var(--figma-color-text-tertiary);&:after{background-color:var(--figma-color-icon-disabled)}}&[variant=ghost]{box-shadow:none;background-color:#0000;&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){background-color:var(--figma-color-bg-secondary)}}&[variant=input]{box-shadow:none;background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text);&:hover:not([disabled]):not([disabled=false]):not([open]:not([open=false])){box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-transparent)}&:active:not([disabled]):not([disabled=false]){background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text)}&:focus-within{background-color:var(--figma-color-bg-secondary)}}&[open]:not([open=false]){color:var(--figma-color-text-selected);background-color:var(--figma-color-bg-selected);box-shadow:none;&:after{background-color:var(--figma-color-icon-selected)}}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-16-chevron);background-color:var(--figma-color-icon);pointer-events:none;z-index:1;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}fig-select::part(listbox){--z-index:999999;--fig-popup-radius:var(--radius-large);--fig-popup-bg-color:var(--figma-color-bg-menu);z-index:var(--z-index);border-radius:var(--fig-popup-radius);background-color:var(--fig-popup-bg-color);color:var(--figma-color-text-menu);color-scheme:dark;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0;height:max-content;max-height:calc(100vh - 1rem);margin:0;padding:0;position:fixed;overflow:hidden}fig-select-options>:is(fig-separator,fig-menu-separator){&[label]:not([label=""]){--fig-menu-inline-padding:var(--spacer-3);--fig-separator-padding-inline:var(--spacer-3,.75rem);&:before{margin-inline:unset;margin-left:calc(-1 * var(--spacer-5));margin-right:calc(-1 * var(--spacer-2))}}}fig-select-option{max-width:100%;color:var(--figma-color-text-menu);user-select:none;text-overflow:ellipsis;white-space:nowrap;text-align:left;overflow:hidden;& h3,& label{text-overflow:ellipsis;overflow:hidden}&>fig-icon[data-fig-select-checkmark]{margin:0 var(--spacer-1);visibility:hidden;order:-1}&:not(:has(>:not([slot=prepend]):not([slot=append])))>[slot=append]{float:right}&>:not([slot=prepend]):not([slot=append]){text-overflow:ellipsis;overflow:hidden}&>[slot=append]{color:var(--figma-color-text-tertiary)}fig-select[subtle]:not([subtle=false]) &:not([subtle=false]){&:hover,&:focus-visible{&:before{background-color:var(--figma-color-bg-secondary)}}}&[selected]:not([selected=false])>fig-icon[data-fig-select-checkmark],&[aria-selected=true]>fig-icon[data-fig-select-checkmark]{visibility:visible}}fig-reorder{display:contents;&:not([handle]):is(:not([disabled]),[disabled=false])>[data-reorder-item]{cursor:grab;&>fig-header,&>fig-header *,&>label{cursor:grab}}&>.dragging{background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]) [data-reorder-handle]{cursor:inherit}}[data-reorder-handle]{cursor:grab}body.fig-reorder-dragging{&,& *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}}.fig-reorder-indicator{pointer-events:none;z-index:1000000;border-radius:1px;position:fixed;&:before{content:"";background:var(--figma-color-border-selected);width:100%;height:100%;position:absolute;top:0;left:0}&.fig-reorder-indicator-ring{&[data-axis=vertical]:before{left:var(--spacer-1);width:calc(100% - var(--spacer-1))}&[data-axis=horizontal]:before{top:var(--spacer-1);height:calc(100% - var(--spacer-1))}&:after{content:"";width:var(--spacer-2);height:var(--spacer-2);border:2px solid var(--figma-color-border-selected);border-radius:50%;position:absolute;top:1px;left:0;transform:translate(-50%,-50%)}&[data-axis=horizontal]:after{top:0;left:1px}}&[data-axis=vertical]{height:2px}&[data-axis=horizontal]{width:2px}}