@rogieking/figui3 3.18.0 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +26 -13
  2. package/components.css +49 -26
  3. package/dist/components.css +1 -1
  4. package/dist/fig.css +1 -1
  5. package/dist/fig.js +49 -49
  6. package/fig.js +328 -53
  7. package/package.json +1 -1
package/dist/fig.css CHANGED
@@ -1 +1 @@
1
- html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}:root,:host{color-scheme:light dark;--figma-color-bg:light-dark(#fff,#2c2c2c);--figma-color-bg-brand:light-dark(#0d99ff,#0c8ce9);--figma-color-bg-menu:#1e1e1e;--figma-color-bg-menu-hover:#0c8ce9;--figma-color-bg-brand-hover:light-dark(#007be5,#0a6dc2);--figma-color-bg-brand-pressed:light-dark(#0768cf,#105cad);--figma-color-bg-brand-secondary:light-dark(#0768cf,#105cad);--figma-color-bg-brand-tertiary:light-dark(#e5f4ff,#394360);--figma-color-bg-component:light-dark(#9747ff,#8a38f5);--figma-color-bg-component-hover:light-dark(#8638e5,#7a2ed6);--figma-color-bg-component-pressed:light-dark(#8638e5,#7a2ed6);--figma-color-bg-component-secondary:light-dark(#7c2bda,#652ca8);--figma-color-bg-component-tertiary:light-dark(#f1e5ff,#473956);--figma-color-bg-danger:light-dark(#f24822,#e03e1a);--figma-color-bg-danger-hover:light-dark(#dc3412,#c4381c);--figma-color-bg-danger-pressed:light-dark(#dc3412,#c4381c);--figma-color-bg-danger-secondary:light-dark(#bd2915,#963323);--figma-color-bg-danger-tertiary:light-dark(#ffe2e0,#60332a);--figma-color-bg-disabled:light-dark(#d9d9d9,#757575);--figma-color-bg-disabled-secondary:#b3b3b3;--figma-color-bg-hover:light-dark(#f5f5f5,#383838);--figma-color-bg-inverse:light-dark(#2c2c2c,#fff);--figma-color-bg-onselected:light-dark(#bde3ff,#679);--figma-color-bg-onselected-hover:light-dark(#bde3ff,#679);--figma-color-bg-onselected-pressed:light-dark(#bde3ff,#679);--figma-color-bg-pressed:light-dark(#f5f5f5,#383838);--figma-color-bg-secondary:light-dark(#f5f5f5,#383838);--figma-color-bg-selected:light-dark(#e5f4ff,#4a5878);--figma-color-bg-selected-hover:light-dark(#bde3ff,#536383);--figma-color-bg-selected-pressed:light-dark(#bde3ff,#536383);--figma-color-bg-selected-secondary:light-dark(#f2f9ff,#394360);--figma-color-bg-selected-strong:light-dark(#0d99ff,#0c8ce9);--figma-color-bg-selected-tertiary:light-dark(#f2f9ff,#394360);--figma-color-bg-success:light-dark(#14ae5c,#198f51);--figma-color-bg-success-hover:light-dark(#009951,#078348);--figma-color-bg-success-pressed:light-dark(#009951,#078348);--figma-color-bg-success-secondary:light-dark(#008043,#0a5c35);--figma-color-bg-success-tertiary:light-dark(#cff7d3,#476656);--figma-color-bg-tertiary:light-dark(#e6e6e6,#444);--figma-color-bg-warning:light-dark(#ffcd29,#f3c11b);--figma-color-bg-warning-hover:light-dark(#ffc21a,#f2b50d);--figma-color-bg-warning-pressed:light-dark(#ffc21a,#f2b50d);--figma-color-bg-warning-secondary:light-dark(#fab815,#e4a711);--figma-color-bg-warning-tertiary:light-dark(#fff1c2,#5c4100);--figma-color-bg-switch:light-dark(#e6e6e6,#444);--figma-color-border:light-dark(#e6e6e6,#444);--figma-color-border-brand:light-dark(#bde3ff,#105cad);--figma-color-border-brand-strong:light-dark(#007be5,#7cc4f8);--figma-color-border-component:light-dark(#e4ccff,#652ca8);--figma-color-border-component-hover:light-dark(#9747ff,#8a38f5);--figma-color-border-component-strong:light-dark(#8638e5,#d6b6fb);--figma-color-border-danger:light-dark(#ffc7c2,#963323);--figma-color-border-danger-strong:light-dark(#dc3412,#fca397);--figma-color-border-disabled:light-dark(#e6e6e6,#444);--figma-color-border-disabled-strong:light-dark(#0000004d,#fff6);--figma-color-border-menu:#383838;--figma-color-border-onbrand:light-dark(#007be5,#0a6dc2);--figma-color-border-onbrand-strong:#fff;--figma-color-border-oncomponent:light-dark(#8638e5,#7a2ed6);--figma-color-border-oncomponent-strong:#fff;--figma-color-border-ondanger:light-dark(#dc3412,#c4381c);--figma-color-border-ondanger-strong:#fff;--figma-color-border-onselected:light-dark(#bde3ff,#679);--figma-color-border-onselected-strong:light-dark(#000000e5,#ffffffe5);--figma-color-border-onsuccess:light-dark(#009951,#078348);--figma-color-border-onsuccess-strong:#fff;--figma-color-border-onwarning:light-dark(#fab815,#e4a711);--figma-color-border-onwarning-strong:#000000e5;--figma-color-border-selected:light-dark(#0d99ff,#0c8ce9);--figma-color-border-selected-strong:light-dark(#007be5,#7cc4f8);--figma-color-border-strong:light-dark(#2c2c2c,#ffffffe5);--figma-color-border-success:light-dark(#aff4c6,#0a5c35);--figma-color-border-success-strong:light-dark(#009951,#79d297);--figma-color-border-warning:light-dark(#ffe8a3,#925711);--figma-color-border-warning-strong:light-dark(#b86200,#f7d15f);--figma-color-icon:light-dark(#000000e5,#fff);--figma-color-icon-brand:light-dark(#007be5,#7cc4f8);--figma-color-icon-brand-pressed:light-dark(#0768cf,#0c8ce9);--figma-color-icon-brand-secondary:light-dark(#80caff,#0a6dc2);--figma-color-icon-brand-tertiary:light-dark(#bde3ff,#394360);--figma-color-icon-component:light-dark(#8638e5,#d1a8ff);--figma-color-icon-component-pressed:light-dark(#7c2bda,#d6b6fb);--figma-color-icon-component-secondary:light-dark(#c5b2dc,#7f699b);--figma-color-icon-component-tertiary:light-dark(#c5b2dc,#7f699b);--figma-color-icon-danger:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-hover:light-dark(#bd2915,#fbbcb6);--figma-color-icon-danger-pressed:light-dark(#bd2915,#fbbcb6);--figma-color-icon-danger-secondary:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-secondary-hover:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-tertiary:light-dark(#f24822,#e03e1a);--figma-color-icon-disabled:light-dark(#0000004d,#fff6);--figma-color-icon-hover:light-dark(#000000e5,#fff);--figma-color-icon-onbrand:#fff;--figma-color-icon-onbrand-secondary:#fffc;--figma-color-icon-onbrand-tertiary:#fff6;--figma-color-icon-oncomponent:#fff;--figma-color-icon-oncomponent-secondary:#fffc;--figma-color-icon-oncomponent-tertiary:#fff6;--figma-color-icon-ondanger:#fff;--figma-color-icon-ondanger-secondary:#fffc;--figma-color-icon-ondanger-tertiary:#fff6;--figma-color-icon-ondisabled:light-dark(#fff,#2c2c2c);--figma-color-icon-oninverse:light-dark(#ffffffe5,#000000e5);--figma-color-icon-onselected:light-dark(#000000e5,#fff);--figma-color-icon-onselected-secondary:light-dark(#00000080,#ffffffb2);--figma-color-icon-onselected-strong:#fff;--figma-color-icon-onselected-tertiary:light-dark(#0000004d,#fff6);--figma-color-icon-onsuccess:#fff;--figma-color-icon-onsuccess-secondary:#fffc;--figma-color-icon-onsuccess-tertiary:#fff6;--figma-color-icon-onwarning:#000000e5;--figma-color-icon-onwarning-secondary:#00000080;--figma-color-icon-onwarning-tertiary:#0000004d;--figma-color-icon-pressed:light-dark(#007be5,#0a6dc2);--figma-color-icon-secondary:light-dark(#00000080,#ffffffb2);--figma-color-icon-secondary-hover:light-dark(#000000e5,#fff);--figma-color-icon-selected:light-dark(#007be5,#7cc4f8);--figma-color-icon-selected-secondary:light-dark(#007be5,#7cc4f8);--figma-color-icon-selected-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-icon-success:light-dark(#14ae5c,#198f51);--figma-color-icon-success-pressed:light-dark(#008043,#a1e8b9);--figma-color-icon-success-secondary:light-dark(#14ae5c,#198f51);--figma-color-icon-success-tertiary:light-dark(#14ae5c,#198f51);--figma-color-icon-tertiary:light-dark(#0000004d,#fff6);--figma-color-icon-tertiary-hover:light-dark(#000000e5,#fff);--figma-color-icon-warning:light-dark(#ffcd29,#f3c11b);--figma-color-icon-warning-pressed:light-dark(#b86200,#f7d15f);--figma-color-icon-warning-secondary:light-dark(#ffcd29,#f3c11b);--figma-color-icon-warning-tertiary:light-dark(#ffcd29,#f3c11b);--figma-color-text:light-dark(#000000e5,#fff);--figma-color-text-brand:light-dark(#007be5,#7cc4f8);--figma-color-text-brand-secondary:light-dark(#007be5,#7cc4f8);--figma-color-text-brand-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-text-component:light-dark(#8638e5,#d1a8ff);--figma-color-text-component-pressed:light-dark(#7c2bda,#d6b6fb);--figma-color-text-component-secondary:light-dark(#c5b2dc,#7f699b);--figma-color-text-component-tertiary:light-dark(#c5b2dc,#7f699b);--figma-color-text-danger:light-dark(#dc3412,#fca397);--figma-color-text-danger-secondary:light-dark(#dc3412,#fca397);--figma-color-text-danger-tertiary:light-dark(#dc3412,#fca397);--figma-color-text-disabled:light-dark(#0000004d,#fff6);--figma-color-text-hover:light-dark(#000000e5,#fff);--figma-color-text-onbrand:#fff;--figma-color-text-onbrand-secondary:#fffc;--figma-color-text-onbrand-tertiary:#fff6;--figma-color-text-oncomponent:#fff;--figma-color-text-oncomponent-secondary:#fffc;--figma-color-text-oncomponent-tertiary:#fff6;--figma-color-text-ondanger:#fff;--figma-color-text-ondanger-secondary:#fffc;--figma-color-text-ondanger-tertiary:#fff6;--figma-color-text-ondisabled:light-dark(#fff,#2c2c2c);--figma-color-text-oninverse:light-dark(#ffffffe5,#000000e5);--figma-color-text-onselected:light-dark(#000000e5,#ffffffe5);--figma-color-text-onselected-secondary:light-dark(#00000080,#ffffffb2);--figma-color-text-onselected-strong:#fff;--figma-color-text-onselected-tertiary:light-dark(#0000004d,#fff6);--figma-color-text-onsuccess:#fff;--figma-color-text-onsuccess-secondary:#fffc;--figma-color-text-onsuccess-tertiary:#fff6;--figma-color-text-onwarning:#000000e5;--figma-color-text-onwarning-secondary:#00000080;--figma-color-text-onwarning-tertiary:#0000004d;--figma-color-text-secondary:light-dark(#00000080,#ffffffb2);--figma-color-text-secondary-hover:light-dark(#000000e5,#fff);--figma-color-text-selection:#0d99ff66;--figma-color-text-selected:light-dark(#007be5,#7cc4f8);--figma-color-text-selected-secondary:light-dark(#007be5,#7cc4f8);--figma-color-text-selected-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-text-success:light-dark(#009951,#79d297);--figma-color-text-success-secondary:light-dark(#009951,#79d297);--figma-color-text-success-tertiary:light-dark(#009951,#79d297);--figma-color-text-tertiary:light-dark(#0000004d,#fff6);--figma-color-text-tertiary-hover:light-dark(#000000e5,#fff);--figma-color-text-warning:light-dark(#b86200,#f7d15f);--figma-color-text-warning-secondary:light-dark(#b86200,#f7d15f);--figma-color-text-warning-tertiary:light-dark(#b86200,#f7d15f);--figma-color-text-menu:#fff;--figma-color-text-menu-secondary:#ffffffb3;--figma-color-text-menu-tertiary:#fff6;--font-size:16px;--font-family:"Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--body-medium-fontSize:.6875rem;--body-large-fontSize:.8125rem;--body-letter-spacing:.055px;--body-medium-strong-fontWeight:550;--body-large-strong-fontWeight:500;--body-medium-fontWeight:450;--spacer-1:.25rem;--spacer-2:.5rem;--spacer-2-5:.75rem;--spacer-3:1rem;--spacer-4:1.5rem;--spacer-5:2rem;--spacer-6:2.5rem;--radius-none:0;--radius-small:.125rem;--radius-medium:.3125rem;--radius-large:.8125rem;--figma-radius-none:var(--radius-none);--figma-radius-small:var(--radius-small);--figma-radius-medium:var(--radius-medium);--figma-radius-large:var(--radius-large);--input-transition:all 80ms ease-out;--popover-min-width:15rem;--handle-color:#fff;--bg-selected:#f5f5f5;--bg-selected-active:#e5f4ff;--bg-tooltip:#1e1e1e;--color-tooltip:#fff;--figma-color-bordertranslucent:light-dark(#0000001a,#ffffff1a);--figma-color-bg-transparent:light-dark(#0000000d,#ffffff0d);--figma-color-bg-transparent-hover:light-dark(#0000000d,#ffffff0d);--figma-color-bg-transparent-pressed:light-dark(#0000001a,#ffffff1a);--figma-color-bg-transparent-secondary:light-dark(#0003,#fff3);--eased-fade-stops:var(--figma-color-bg) 0%, color-mix(in oklch, var(--figma-color-bg) 99.9%, transparent) 10%, color-mix(in oklch, var(--figma-color-bg) 99.2%, transparent) 20%, color-mix(in oklch, var(--figma-color-bg) 97.3%, transparent) 30%, color-mix(in oklch, var(--figma-color-bg) 93.6%, transparent) 40%, color-mix(in oklch, var(--figma-color-bg) 87.5%, transparent) 50%, color-mix(in oklch, var(--figma-color-bg) 78.4%, transparent) 60%, color-mix(in oklch, var(--figma-color-bg) 65.7%, transparent) 70%, color-mix(in oklch, var(--figma-color-bg) 48.8%, transparent) 80%, color-mix(in oklch, var(--figma-color-bg) 27.1%, transparent) 90%, transparent 100%;--checkerboard:repeating-conic-gradient(#0000001a 0% 25%, #ffffff1a 0% 50%) 0 0 / .66666rem .66666rem;--bg-hue:linear-gradient(90deg, red, #ff3000, #ff6000, #ff8f00, #ffbf00, #ffef00, #dfff00, #afff00, #80ff00, #50ff00, #20ff00, #00ff10, #00ff40, #00ff70, #00ff9f, #00ffcf, #0ff, #00cfff, #009fff, #0070ff, #0040ff, #0010ff, #2000ff, #5000ff, #7f00ff, #af00ff, #df00ff, #ff00ef, #ff00bf, #ff008f, #ff0060, #ff0030);--icon-chevron:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");--icon-checkmark:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");--icon-reset:url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");--icon-steppers: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 d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");--icon-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");--icon-add: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='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");--icon-minus: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='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");--icon-back: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='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");--icon-arrow-left:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--icon-forward: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='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");--icon-close: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 d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");--icon-rotate: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='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");--icon-swap: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='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");--tip-pointer:path("M3 3L0 0H6L3 3Z");--figma-elevation-100:0px 0px .5px 0px light-dark(#0000004d,#00000080), inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a), 0px 1px 3px 0px light-dark(#00000026,#0006);--figma-elevation-200:0px 0px .5px 0px light-dark(#0000002e,#0000), 0px 3px 8px 0px light-dark(#0000001a,#00000059), 0px 1px 3px 0px light-dark(#0000001a,#00000080), inset 0px .5px 0px 0px light-dark(#0000,#ffffff14), inset 0px 0px .5px 0px light-dark(#0000,#ffffff4d);--elevation-100-canvas:0 0 .5px 0 light-dark(#0000004d,#00000080), 0 .5px 0 0 light-dark(#0000,#ffffff1a) inset, 0 0 .5px 0 light-dark(#0000,#ffffff4d) inset, 0 1px 3px 0 light-dark(#00000026,#0006);--figma-elevation-400-menu-panel:0px 0px .5px 0px light-dark(#0000001f,#0000), 0px 10px 16px 0px light-dark(#0000001f,#00000059), 0px 2px 5px 0px light-dark(#00000026,#00000059), inset 0px .5px 0px 0px light-dark(#0000,#ffffff14), inset 0px .75px 0px 0px light-dark(#0000,#ffffff13);--figma-elevation-500-modal-window:0px 0px .5px 0px light-dark(#00000014,#0000), 0px 10px 24px 0px light-dark(#0000002e,#00000073), 0px 2px 5px 0px light-dark(#00000026,#0000), 0px 3px 5px 0px light-dark(#0000,#00000059), inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a);--handle-shadow:0px 0px 0px .5px #0000001a, 0px 0px .5px 0px light-dark(#0000004d,#ffffff1a), 0px 1px 3px 0px light-dark(#00000026,#0000)}button,select,input,fieldset{font:inherit;align-items:center;gap:.25rem;margin:0;line-height:1rem;display:inline-flex}textarea,input[type=text],input[type=number],input[type=password],input[type=url],input[type=email],input[type=search],input[type=tel],.input{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);padding:var(--spacer-1) var(--spacer-2);box-sizing:content-box;resize:none;min-width:0;font:inherit;color:inherit;-moz-appearance:textfield;appearance:textfield;border:0;display:flex;line-height:1rem!important;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{color-scheme:inherit;-webkit-appearance:none;margin:0;display:none}}fig-input-number .fig-steppers{border-radius:0 var(--radius-medium) var(--radius-medium) 0;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden;& button{appearance:none;background-color:var(--figma-color-text-secondary);cursor:pointer;border:0;flex:1;width:1.5rem;margin:0;padding:0;display:block;mask-position:50% -3.5px;mask-size:1rem;mask-repeat:no-repeat;&:hover{background-color:var(--figma-color-text)}&:active{background-color:var(--figma-color-text-tertiary)}}fig-input-number[disabled]:not([disabled=false]) & button{pointer-events:none;background-color:var(--figma-color-text-disabled)}& .fig-stepper-up{mask-image:var(--icon-chevron);rotate:180deg}& .fig-stepper-down{mask-image:var(--icon-chevron)}}textarea{box-sizing:border-box;width:100%;min-height:2rem;display:block}select,input[type=text][list]{height:var(--spacer-4);padding:0 calc(var(--spacer-2) - 1px);border-radius:var(--radius-medium);appearance:none;color:var(--figma-color-text);background-color:var(--figma-color-bg);box-shadow:inset 0 0 0 1px var(--figma-color-border);accent-color:var(--figma-color-bg-brand);white-space:nowrap;text-overflow:ellipsis;border:0;flex:1 0 0;align-items:center;display:flex;overflow:hidden;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-calendar-picker-indicator{color-scheme:inherit;opacity:0}}@supports (appearance:base-select){fig-dropdown[experimental~=modern]{&[type=dropdown]{& select:before{content:attr(aria-label)}& option::checkmark{display:none}& option{padding-left:var(--spacer-3)}}& select{--option-height:1.5rem;--max-width:20rem;@media (hover) and (pointer:fine){&,&::picker(select){appearance:base-select}}will-change:scale;padding-block:0;@supports (-webkit-touch-callout:none){font-size:16px}& option::checkmark{content:"";width:1rem;height:1rem;-webkit-mask-image:var(--icon-checkmark);mask-image:var(--icon-checkmark);background-color:currentColor;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}& option{gap:var(--spacer-1);padding:0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));font-weight:var(--body-medium-fontWeight);color:var(--figma-color-text-menu);display:flex;position:relative;& *{color:inherit}&[hidden]{display:none}&:before{content:"";inset:0 var(--spacer-2);border-radius:var(--radius-medium);z-index:-1;display:block;position:absolute}&:checked:before,&:not(:checked):before{background-color:#0000}&:not(:disabled){&:hover,&:active,&:focus-visible{background-color:#0000;outline:0;&:before{background-color:var(--figma-color-bg-menu-hover)}}}}& optgroup{color:var(--figma-color-text-menu-secondary);text-align:left;padding:0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));font-weight:var(--body-medium-fontWeight);position:relative;&[label]:not([label=""]){padding-top:var(--spacer-2);& option:first-child{margin-top:var(--spacer-2)}}& legend{padding:var(--spacer-1,.3rem) var(--spacer-1,1rem)}& option{margin:0 calc(var(--spacer-1) * -1);margin-left:calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1)}&:not(:first-child):not(:first-of-type){margin-top:var(--spacer-2);padding-top:var(--spacer-3);&:before{content:"";background-color:var(--figma-color-border-menu);height:1px;margin-bottom:var(--spacer-2);display:block;position:absolute;top:1px;left:0;right:0}}}& option[hidden=true]:first-child+optgroup{padding-top:var(--spacer-2);margin-top:0;&:before{display:none}}&:has(>button){padding-left:0}&>button{align-items:center;gap:var(--spacer-1);width:100%;color:inherit;font:inherit;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;height:100%;margin:0;padding:0;display:flex;overflow:hidden;&>selectedcontent{align-items:center;gap:0;min-width:0;display:flex;&:not(:has(>svg)){padding-left:var(--spacer-2)}& svg{flex-shrink:0}}}}& ::picker-icon{display:none}& ::picker(select){appearance:base-select;color-scheme:dark;scrollbar-width:thin;scrollbar-color:var(--figma-color-text-menu-tertiary) var(--figma-color-bg-menu);border-radius:var(--radius-large);background-color:var(--figma-color-bg-menu);padding:var(--spacer-2) 0;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0}}}input[type=text][list],select{padding-right:var(--spacer-4);padding-left:var(--spacer-2)}fig-dropdown,.fig-dropdown{display:inline-flex;position:relative;&>:not(select){display:none!important}&>select{flex:1;align-items:center;width:100%;display:flex}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-chevron);background-color:var(--figma-color-icon);pointer-events:none;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}&[autoresize] select{field-sizing:content}}.fig-button,fig-button{color:var(--figma-color-text-onbrand);height:var(--spacer-4);padding:0 var(--spacer-2);appearance:none;border-radius:var(--radius-medium);background-color:var(--figma-color-bg-brand);border:0;outline:0;justify-content:center;align-items:center;min-width:0;font-weight:500;display:flex;&:active{background-color:var(--figma-color-bg-brand-pressed)}&:hover{background-color:var(--figma-color-bg-brand-hover);&:active{background-color:var(--figma-color-bg-brand-pressed);color:var(--figma-color-text-onbrand-secondary)}}&[variant=link]{box-shadow:none;color:var(--figma-color-text-brand);background:0 0;&:hover:not(:active){background-color:#0000}&:active{background-color:var(--figma-color-bg-selected);color:var(--figma-color-text-brand);outline:0}}&[variant=ghost]{box-shadow:none;color:var(--figma-color-text);background:0 0;&:hover:not(:active){background-color:var(--figma-color-bg-transparent-hover)}&:active{background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text);outline:0}}&[variant=ghost][disabled]:not([disabled=false]){background-color:#0000}&[variant=secondary]{box-shadow:inset 0 0 0 1px var(--figma-color-border);padding:0 calc(var(--spacer-2) - 1px);color:var(--figma-color-text);background:0 0;&:active{background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}}&[variant=input]{background-color:var(--figma-color-bg-secondary);box-shadow:none;color:var(--figma-color-text);&:hover{box-shadow:inset 0 0 0 1px var(--figma-color-border);background-color:var(--figma-color-bg-transparent)}&:active{background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}&:focus-visible{background-color:var(--figma-color-bg-secondary)}}&[variant=overlay]{color-scheme:light;background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:0 0 0 1px var(--figma-color-bordertranslucent);&:active,&:has(:active){background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}}&[icon]{width:var(--spacer-4);flex-grow:0;flex-shrink:0;flex-basis:var(--spacer-4);padding:0;&[size=compact]{width:var(--spacer-3);flex-basis:var(--spacer-3)}}&[disabled]:not([disabled=false]){background-color:var(--figma-color-bg-disabled);pointer-events:none;cursor:not-allowed;&:not([variant=secondary]){color:var(--figma-color-text-ondisabled);box-shadow:none}&[variant=secondary],&[variant=ghost]{color:var(--figma-color-text-disabled);background-color:#0000}}&[size=large],&[size=large]>button{height:var(--spacer-5);padding:0 var(--spacer-3)}&[size=large][icon],&[size=large][icon]>button{width:var(--spacer-5);flex-basis:var(--spacer-5);padding:0}&[full]{width:100%}&[inline=false],&[inline=false]>button{text-align:left;width:100%;height:auto;padding:var(--spacer-1) var(--spacer-2);justify-content:left;align-items:center;display:flex}&[type=select],&[type=upload]{position:relative;overflow:hidden;&>select,&>input,&>fig-dropdown{opacity:0;appearance:none;position:absolute;inset:0}}&[inline=false]{padding:0}&[selected]:not([selected=false]){&,&:hover{color:var(--figma-color-icon-brand);background-color:var(--figma-color-bg-selected)}}&:focus-visible,&[data-focus-visible]{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}& svg{& [fill]{fill:currentColor}& [stroke]:not([stroke=none]){stroke:currentColor}}&:has(svg:first-child):not([icon]){padding-left:var(--spacer-1)}}.fig-button-combo,fig-button-combo,.fig-input-combo,fig-input-combo{flex-wrap:nowrap;align-items:center;gap:0;display:inline-flex;&>*{&:first-child,&:first-child>*{border-top-right-radius:0;border-bottom-right-radius:0}&:last-child,&:last-child>*{border-top-left-radius:0;border-bottom-left-radius:0}&:not(:last-child):not(:first-child),&:not(:last-child):not(:first-child)>*{border-radius:0}}}.fig-input-combo,fig-input-combo{gap:1px}.fig-button-combo,fig-button-combo{&>:not([variant=secondary]):not(:first-child){box-shadow:inset 1px 0 0 0 var(--figma-color-bg-brand-hover);&[disabled]:not([disabled=false]){box-shadow:inset 1px 0 0 0 var(--figma-color-border-disabled)}}&>[variant=secondary]:not(:first-child){border-left-width:0!important;&[disabled]:not([disabled=false]){border-left-width:0!important}}}fig-tab,.fig-tab{height:1.5rem;padding:0 var(--spacer-2);appearance:none;cursor:default;user-select:none;border-radius:var(--radius-medium);color:var(--figma-color-text-secondary);border:0;flex-direction:column;justify-content:center;align-items:center;display:inline-flex;position:relative;gap:0!important;&[label]{&:after{content:attr(label);color:var(--figma-color-text-secondary);visibility:hidden;user-select:none;pointer-events:none;font-weight:var(--body-medium-strong-fontWeight);overflow:hidden;width:auto!important;height:0!important}}&:has(:checked),&[selected]:not([selected=false]){background-color:var(--figma-color-bg-secondary);font-weight:var(--body-medium-strong-fontWeight);color:var(--figma-color-text)}&:hover{background-color:var(--figma-color-bg-secondary)}& [type=radio]{opacity:0;z-index:1;border-radius:0;width:100%;height:100%;position:absolute;inset:0}}fig-tabs,.tabs{gap:var(--spacer-2);display:flex}fig-tab-content,.fig-tab-content{display:none}fig-avatar,.fig-avatar{contain:layout paint;--size:1.5rem;width:var(--size);height:var(--size);background:var(--figma-color-bg-brand);color:var(--figma-color-icon-onbrand);border:0;border-radius:100%;place-items:center;display:inline-grid;overflow:hidden;& img{width:var(--size);height:var(--size);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border-radius:100%;position:absolute;&:not([src]){background:var(--checkerboard)}}&[borderless] img{box-shadow:none}&:has(img[src]){background:0 0}&:after{content:attr(initials)}&[size=large]{--size:3rem}}input[type=color]{-webkit-appearance:none;appearance:none;box-sizing:content-box;border-radius:var(--radius-medium);background:0 0;background-color:var(--figma-color-bg-secondary);border:0;flex-shrink:0;width:.875rem;height:.875rem;margin:0;padding:.3125rem;display:inline-grid;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-color-swatch-wrapper{color-scheme:inherit;appearance:none;background:var(--checkerboard);color-scheme:inherit;border:0;border-radius:.125rem;outline:0;grid-area:1/1;padding:0;overflow:hidden}&::-webkit-color-swatch{color-scheme:inherit;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);color-scheme:inherit;mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);border:0;border-radius:.125rem;padding:0}}input[type=color]{&::-moz-color-swatch{color-scheme:inherit;appearance:none;mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border:0;border-radius:.125rem;padding:0}}fig-chit{--size:1.5rem;--padding:5px;--width:var(--size);--height:var(--size);--border-radius:var(--radius-medium);--chit-background:#d9d9d9;--chit-bg-size:cover;--chit-bg-position:center;--selected:0;--alpha:1;width:var(--size);height:var(--size);border-radius:var(--border-radius);background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 calc(var(--selected) * 1px) var(--figma-color-border-selected);display:inline-grid;&:before,&:after,& input{grid-area:1/1}&[selected]:not([selected=false]){--selected:1;background-color:#0000}&[size=medium],&[size=large]{--padding:0px;&[selected]:not([selected=false]){--padding:3px}}&[size=medium]{--size:1.5rem;--padding:0px}&[size=large]{--size:2rem;--padding:0px}&[disabled]:not([disabled=false]){pointer-events:none}&:before,&:after{content:"";width:calc(var(--width) - var(--padding) * 2);height:calc(var(--height) - var(--padding) * 2);border-radius:calc(var(--border-radius) - (var(--padding) / 2));pointer-events:none;grid-area:1/1;place-self:center}&:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);z-index:1}&:before{content:"";background:var(--chit-background);background-size:var(--chit-bg-size);background-position:var(--chit-bg-position);border-radius:calc(var(--border-radius) - (var(--padding) / 2));mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);background-repeat:no-repeat;grid-area:1/1;place-self:center}&[size=medium]:before,&[size=large]:before{border-radius:calc(var(--border-radius) - var(--padding))}& input[type=color]{width:var(--width);height:var(--height);box-sizing:border-box;opacity:0;background:0 0;grid-area:1/1;place-self:center}&[data-type=gradient],&[data-type=image]{background-color:var(--figma-color-bg-secondary);& input[type=color]{display:none}}&[data-type=image]:not([background]):after,&[data-type=image][background=""]:after,&[data-type=image][background="url()"]:after,&[checkerboard]:not([checkerboard=false]):after{background:var(--checkerboard)}}fig-image{--image-size:2rem;--fit:cover;--image-width:var(--image-size);--image-height:var(--image-size);--aspect-ratio:1 / 1;width:var(--image-width);height:var(--image-height);aspect-ratio:var(--aspect-ratio);place-items:center;display:inline-grid;&>*{grid-area:1/1}& fig-chit[size=large]{--padding:0px;--chit-bg-size:var(--fit);--size:100%!important;--width:100%!important;--height:100%!important;&[disabled]{opacity:1}}&:not([src]):not([src=""]) fig-button,&:hover fig-button{opacity:1;pointer-events:all}&[size=medium]{--image-size:4rem}&[size=large]{--image-size:8rem}&[size=auto]{--image-size:6rem;&[full]:not([full=false]){--image-width:100%}}&[aspect-ratio]{height:auto;& fig-chit{--size:100%!important;height:auto!important;aspect-ratio:var(--aspect-ratio)!important}}&>div{gap:var(--spacer-2);opacity:0;pointer-events:none;display:flex}&:not([src]):not([src=""])>div,&:hover>div{opacity:1;pointer-events:all}& fig-button[type=download]{display:none}&[src]:not([src=""]){& fig-button[type=download]{display:inline-flex}}}fig-easing-curve{gap:var(--spacer-2);--stroke-width:1;--easing-bezier-handle-radius:5;--easing-spring-handle-radius:5;--easing-handle-fill:var(--figma-color-border-strong);--easing-duration-bar-width:7;--easing-duration-bar-height:16;--easing-duration-bar-radius:4;--aspect-ratio:1 / 1;flex-direction:column;width:100%;display:flex;& .fig-easing-curve-svg{width:100%;aspect-ratio:var(--aspect-ratio);overflow:visible}& .fig-easing-curve-svg-container{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);padding:var(--spacer-3);overflow:hidden;&:is(:hover,:active,:focus,:focus-visible,:focus-within){overflow:visible}}&.spring-mode{& .fig-easing-curve-svg-container,& .fig-easing-curve-svg{cursor:ew-resize}}& .fig-easing-curve-diagonal,& .fig-easing-curve-bounds,& .fig-easing-curve-arm,& .fig-easing-curve-path,& .fig-easing-curve-target{pointer-events:none}& .fig-easing-curve-diagonal{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-bounds{fill:#0000}& .fig-easing-curve-arm{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-path{fill:none;stroke:var(--figma-color-text);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-target{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-handle{pointer-events:all;cursor:default;overflow:visible}& .fig-easing-curve-endpoint{fill:var(--easing-handle-fill)}& .fig-easing-curve-duration-bar fig-handle{--border-radius:calc(var(--easing-duration-bar-radius) * 1px);--width:calc(var(--easing-duration-bar-width) * 1px);--height:calc(var(--easing-duration-bar-height) * 1px)}& .fig-easing-curve-dropdown{& option svg{vertical-align:middle}}}fig-3d-rotate{gap:var(--spacer-2);--aspect-ratio:1 / 1;--perspective:20rem;--perspective-origin:50% 50%;--transform-origin:50% 50% -50cqi;--gradient-start-color:light-dark(#0000000d,#ffffff0d);--border-width:1px;--border-start-color:light-dark(#0000001a,#ffffff1a);--border-end-color:transparent;--gradient-end-color:transparent;--figma-3d-rotate-handle-size:6px;--front-face-bg:light-dark(var(--figma-color-bg),#555);flex-wrap:wrap;width:100%;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0}&>fig-input-number{flex:1 0 3rem}& .fig-3d-rotate-container{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);width:100%;aspect-ratio:var(--aspect-ratio);cursor:grab;user-select:none;flex:100%;justify-content:center;align-items:center;padding:0 2.5rem;display:flex;overflow:hidden;&.dragging,&:active{cursor:grabbing}&:focus{outline:0}}& .fig-3d-rotate-scene{aspect-ratio:1;width:100%;max-width:max(3.5rem,50%);max-height:max(3.5rem,50%);perspective:var(--perspective,20rem);perspective-origin:var(--perspective-origin,50% 50%);container-type:inline-size}& .fig-3d-rotate-cube{aspect-ratio:1;width:100%;height:100%;transform-style:preserve-3d;transform-origin:var(--transform-origin,50% 50% -50cqi);position:relative}& .fig-3d-rotate-face{backface-visibility:visible;background:linear-gradient(to bottom, var(--gradient-start-color), var(--gradient-end-color));position:absolute;inset:0;&.selected{border-radius:var(--radius-medium);box-shadow:var(--elevation-100-canvas);inset:-1px;background:var(--figma-color-border-strong)!important}&.front{background:var(--front-face-bg);border-radius:var(--radius-medium);transform-style:preserve-3d;box-shadow:var(--elevation-100-canvas);inset:-1px;&:after{content:"";width:var(--figma-3d-rotate-handle-size);height:var(--figma-3d-rotate-handle-size);background:var(--figma-color-border-strong);backface-visibility:hidden;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}&.back{transform-origin:100%;background:linear-gradient(to bottom, var(--border-start-color), var(--border-end-color));border-radius:var(--radius-medium);transform:translate(-100%)rotateY(-.25turn)translate(-100%)rotateY(-.25turn)}&.right{transform-origin:0%;background:linear-gradient(to right, var(--gradient-start-color), var(--gradient-end-color));border-width:var(--border-width) 0;border-style:solid;border-image:linear-gradient(to right, var(--border-start-color), var(--border-end-color)) 1;transform:translate(100%)rotateY(.25turn)}&.left{transform-origin:100%;background:linear-gradient(to left, var(--gradient-start-color), var(--gradient-end-color));border-width:var(--border-width) 0;border-style:solid;border-image:linear-gradient(to left, var(--border-start-color), var(--border-end-color)) 1;transform:translate(-100%)rotateY(-.25turn)}&.top{transform-origin:50% 100%;background:linear-gradient(to top, var(--gradient-start-color), var(--gradient-end-color));border-width:0 var(--border-width);border-style:solid;border-image:linear-gradient(to top, var(--border-start-color), var(--border-end-color)) 1;transform:rotateX(.25turn)}&.bottom{transform-origin:50% 0;background:linear-gradient(to bottom, var(--gradient-start-color), var(--gradient-end-color));border-width:0 var(--border-width);border-style:solid;border-image:linear-gradient(to bottom, var(--border-start-color), var(--border-end-color)) 1;top:100%;bottom:auto;transform:rotateX(-.25turn)}}}fig-origin-grid{gap:var(--spacer-2);--aspect-ratio:1 / 1;--origin-grid-dot-size:.125rem;--origin-grid-handle-size:.75rem;--origin-grid-height:var(--spacer-4);flex-direction:column;width:100%;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0}& .fig-origin-grid-surface{width:100%;aspect-ratio:var(--aspect-ratio);min-height:calc(var(--origin-grid-height) * 3)}& .origin-grid{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);user-select:none;cursor:default;width:100%;height:100%;position:relative;container-type:size;&.is-dragging{cursor:grabbing!important;& fig-handle{cursor:grabbing!important}}&.drag-disabled{& fig-handle{cursor:default}}}& .origin-grid-cells{grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:0}& .origin-grid-cell{width:100%;height:100%;min-height:var(--origin-grid-height);color:var(--figma-color-icon-tertiary);pointer-events:none;place-items:center;display:grid;& .origin-grid-dot{width:var(--origin-grid-dot-size);height:var(--origin-grid-dot-size);border-radius:var(--radius-small);background:currentColor}&.is-hovered{color:var(--figma-color-bg-brand-secondary);& .origin-grid-dot{width:var(--origin-grid-handle-size);height:var(--origin-grid-handle-size)}}}& fig-handle{--origin-overflow-rotation:0deg;--origin-overflow-nudge-base:var(--spacer-2-5);--origin-overflow-nudge-x:0px;--origin-overflow-nudge-y:0px;--origin-overflow-nudge-x-scale:calc((100cqb / 100cqi) * -1);--origin-overflow-nudge-y-scale:calc((100cqb / 100cqi) * -1);--width:var(--origin-grid-handle-size);--height:var(--origin-grid-handle-size);--border-radius:var(--radius-small);transform:translate(calc(-50% + var(--origin-overflow-nudge-x)), calc(-50% + var(--origin-overflow-nudge-y))) rotate(var(--origin-overflow-rotation));cursor:default;touch-action:none;position:absolute;top:50%;left:50%;&.beyond-bounds-x,&.beyond-bounds-y{-webkit-mask-image:var(--icon-arrow-left);mask-image:var(--icon-arrow-left);--border-radius:0;--box-shadow:none;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:24px 24px;mask-size:24px 24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}&.beyond-bounds-x.overflow-right{--origin-overflow-rotation:180deg}&.beyond-bounds-y:not(.beyond-bounds-x){--origin-overflow-rotation:90deg}&.beyond-bounds-y.overflow-down:not(.beyond-bounds-x){--origin-overflow-rotation:-90deg}&.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-up{--origin-overflow-rotation:45deg}&.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-down{--origin-overflow-rotation:-45deg}&.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-up{--origin-overflow-rotation:135deg}&.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-down{--origin-overflow-rotation:-135deg}&.overflow-left{--origin-overflow-nudge-x:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale))}&.overflow-right{--origin-overflow-nudge-x:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale) * -1)}&.overflow-up{--origin-overflow-nudge-y:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale))}&.overflow-down{--origin-overflow-nudge-y:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale) * -1)}}& .origin-values{gap:var(--spacer-2);grid-template-columns:1fr 1fr;display:grid}}.input-combo{flex-wrap:nowrap;align-items:center;gap:1px;display:inline-flex;&>label{color:var(--figma-color-text);align-self:stretch}&>*{&:first-child:not(:last-child),&:first-child:not(:last-child)>*{border-top-right-radius:0;border-bottom-right-radius:0}&:last-child:not(:first-child),&:last-child:not(:first-child)>*{border-top-left-radius:0;border-bottom-left-radius:0}&:not(:last-child):not(:first-child),&:not(:last-child):not(:first-child)>*{border-radius:0}}}.fig-input-fill-label{padding:0 var(--spacer-2) 0 var(--spacer-1);height:var(--control-height);font-size:var(--font-size-small);color:var(--figma-color-text-secondary);background:var(--figma-color-bg-secondary);user-select:none;flex:1;align-items:center;min-width:0;margin-left:-1px;display:inline-flex}input[type=checkbox].switch{contain:strict;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;background-color:var(--figma-color-bg-switch);width:2rem;height:1rem;transition:var(--input-transition);box-sizing:border-box;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border:0;border-radius:.5rem;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;top:0;left:0}input[type=checkbox].switch:after{content:"";background-color:var(--handle-color);width:calc(1rem - 2px);height:calc(1rem - 2px);transition:var(--input-transition);box-shadow:var(--handle-shadow);border-radius:.5rem;margin:1px;transform:translate(-.5rem)}input[type=checkbox].switch[indeterminate=true]:after{width:.5rem;height:.125rem;transform:none}input[type=checkbox].switch[indeterminate=true],input[type=checkbox].switch:checked{background-color:var(--figma-color-bg-brand)}input[type=checkbox].switch:checked:after{transform:translate(.5rem)}input[type=checkbox].switch:disabled{background-color:var(--figma-color-bg-secondary);cursor:not-allowed;&:after{background-color:var(--figma-color-bg)}}input[type=checkbox].switch:focus,input[type=checkbox].switch:checked:focus{outline:0}input[type=checkbox]:not(.switch){contain:strict;--size:1rem;appearance:none;border-radius:var(--radius-medium);width:var(--size);height:var(--size);aspect-ratio:1;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-secondary);vertical-align:middle;&:after{content:"";width:var(--size);height:var(--size);mask-image:var(--icon-checkmark);background-color:#0000}&:hover:not(:checked):not(:disabled){&:after{opacity:.25;background-color:var(--figma-color-icon)}}&:checked{background-color:var(--figma-color-bg-brand);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected-strong);&:after{background-color:var(--figma-color-icon-onbrand)}}&:focus{outline:0;&:not(:checked){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}}}@media (prefers-color-scheme:light){:root:not(.figma-dark):not(.figma-light) input[type=checkbox]:not(.switch):not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A")}}:root.figma-light input[type=checkbox]:not(.switch):not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A")}label.checkbox:has([type=checkbox]){padding-left:1.5rem;& [type=radio]{margin-left:-1.5rem}}input[type=radio]{contain:strict;appearance:none;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-secondary);vertical-align:middle;border-radius:.5rem;place-content:center;margin:0;display:inline-grid;&:checked{background-color:var(--figma-color-bg-brand);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected-strong);&:after{transform:scale(1)}}&:focus{outline:0;&:not(:checked){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}}&:hover:not(:checked):not(:disabled){&:after{opacity:.25;background-color:var(--figma-color-icon);transform:scale(1)}}&:after{content:"";background-color:var(--figma-color-icon-onbrand);border-radius:100%;width:.375rem;height:.375rem;transform:scale(0);box-shadow:0 0 0 .75px #0000001a,0 1px 3px #0000001a,0 3px 8px #0000001a,0 0 .5px #0000002e}}label.radio:has([type=radio]){padding-left:1.5rem;& [type=radio]{margin-left:-1.5rem}}fieldset{padding:var(--spacer-2) 0;border:0;flex-direction:column;align-items:start;gap:.25rem;display:flex;&>legend{color:var(--figma-color-text-secondary);margin-top:.125rem;font-size:.625rem;font-weight:500;line-height:.875rem}&>label{column-gap:var(--spacer-2);grid-template-columns:4rem 1fr;align-items:center;width:100%;display:grid}}details{&>summary{font-weight:var(--body-medium-strong-fontWeight);cursor:default;height:var(--spacer-5);user-select:none;color:var(--figma-color-text-secondary);align-items:center;padding:0 1rem 0 0;display:flex;&:before{content:"";mask-image:var(--icon-chevron);background:var(--figma-color-text-secondary);width:1rem;height:1rem;transition:transform var(--transition-duration) var(--transition-timing-function);justify-content:center;align-items:start;display:inline-flex;transform:rotate(-90deg)}&::-webkit-details-marker{display:none}&::marker{content:""}}&>summary:hover,&[open]>summary{color:inherit;&:before{opacity:1}}&[open]{&>summary:before{transform:rotate(0)}}}.fig-slider,fig-slider{--slider-field-height:1.5rem;--slider-height:1rem;--slider-thumb-size:var(--slider-height);--slider-thumb-width:var(--slider-thumb-size);--slider-thumb-height:var(--slider-thumb-size);--slider-thumb-color:var(--handle-color);--slider-thumb-radius:calc(var(--slider-thumb-width) / 2);--slider-thumb-opacity:1;--slider-thumb-outline:none;--slider-thumb-outline-offset:2px;--slider-tick-opacity:1;--slider-tick-radius:100%;--slider-border-radius:calc(var(--slider-height) / 2);--slider-stepper-padding:calc((var(--slider-height) / 2) - var(--slider-tick-width) / 2);--slider-percent:calc(var(--slider-complete) * 100%);--start-percent:calc(var(--default,0) * 100%);--slider-tick-width:calc(var(--slider-height) / 4);--slider-tick-height:calc(var(--slider-height) / 4);--slider-handle-shadow:inset 0 0 0 calc(4px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0px 0 0 .5px #0000001a, var(--figma-elevation-100);--slider-handle-shadow-focus:inset 0 0 0 4px var(--slider-thumb-color), inset 0 0 0 5px #0000001a, var(--handle-shadow), 0 0 0 1px var(--figma-color-border-selected);--slider-transition:none;--handle-transition:var(--slider-transition);height:var(--slider-field-height);transition:var(--slider-transition);align-items:center;display:inline-flex;position:relative;& .fig-slider-input-container{height:var(--slider-height);width:100%;transition:var(--slider-transition);background:var(--figma-color-bg-secondary);border-radius:var(--slider-border-radius);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);display:block;position:relative;&:before{content:"";background:var(--figma-color-bg-brand);pointer-events:none;border-radius:var(--slider-border-radius);min-width:var(--slider-height);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);width:calc(var(--slider-percent) + (1 - var(--slider-complete)) * var(--slider-height));max-width:100%;position:absolute;top:0;bottom:0;left:0}}&[type=stepper]{& .fig-slider-input-container{&:before{display:none}}}&[type=delta]{& datalist option{left:calc(var(--start-percent) - var(--slider-tick-width) / 2);top:calc(50% - var(--slider-tick-height) / 2);margin:0;position:absolute}& .fig-slider-input-container{&:before{--left-start:calc(var(--start-percent) - var(--slider-height) / 2);left:min(var(--left-start), var(--slider-percent) - (var(--slider-complete)) * var(--slider-height));--width:calc(var(--slider-percent) - var(--start-percent));--abs-width:max(var(--width) + var(--slider-height) / 2 + (1 - var(--slider-complete)) * var(--slider-height), -1 * var(--width) + var(--slider-height) / 2 + (var(--slider-complete)) * var(--slider-height));width:var(--abs-width);--delta:calc(var(--slider-complete) - var(--default));--abs-delta:max(var(--delta), -1 * var(--delta));opacity:calc(var(--abs-delta) * 100)}}}&[type=hue],&[type=opacity]{& .fig-slider-input-container{&:before{display:none}}}& input[type=range]{height:var(--slider-height);-webkit-appearance:none;appearance:none;border-radius:var(--slider-border-radius);width:100%;transition:var(--slider-transition);background-color:#0000;display:block;position:relative;&:active::-webkit-slider-thumb{cursor:grabbing;cursor:-webkit-grabbing}&:focus{outline:none}&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;color-scheme:inherit;transition:var(--handle-transition);border-radius:var(--slider-thumb-radius);height:var(--slider-thumb-height);width:var(--slider-thumb-width);margin-top:calc(var(--slider-height) / 2 - var(--slider-thumb-height) / 2);outline:var(--slider-thumb-outline);outline-offset:var(--slider-thumb-outline-offset);aspect-ratio:1;z-index:1;cursor:default;box-shadow:var(--slider-handle-shadow);opacity:var(--slider-thumb-opacity);background:0 0;border:none;position:relative}&:disabled{cursor:not-allowed;&::-webkit-slider-runnable-track{color-scheme:inherit;background:linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent))}&::-webkit-slider-thumb{box-shadow:inset 0 0 0 1rem var(--figma-color-bg-disabled)}}&::-webkit-slider-runnable-track{color-scheme:inherit;height:var(--slider-height);transition:var(--slider-transition);border-radius:var(--slider-border-radius);background-color:#0000}&.hue::-webkit-slider-runnable-track{background:var(--bg-hue)}&.opacity::-webkit-slider-runnable-track{background:linear-gradient(to right, transparent, var(--color)), var(--checkerboard)}}& input[type=range]{height:var(--slider-height);-moz-appearance:none;appearance:none;border-radius:var(--slider-border-radius);width:100%;transition:var(--slider-transition);background-color:#0000;display:block;position:relative;&:focus{outline:none}&:active::-moz-range-thumb{cursor:grabbing;cursor:-webkit-grabbing}&::-moz-range-thumb{color-scheme:inherit;-moz-appearance:none;appearance:none;border-radius:var(--slider-thumb-radius);height:var(--slider-thumb-height);width:var(--slider-thumb-width);outline:var(--slider-thumb-outline);outline-offset:var(--slider-thumb-outline-offset);aspect-ratio:1;z-index:1;cursor:default;box-shadow:var(--slider-handle-shadow);transition:var(--handle-transition);opacity:var(--slider-thumb-opacity);background:0 0;border:none;position:relative}&:disabled{cursor:not-allowed;&::-moz-range-track{color-scheme:inherit;background:linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent))}&::-moz-range-thumb{box-shadow:inset 0 0 0 1rem var(--figma-color-bg-disabled)}}&::-moz-range-track{height:var(--slider-height);border-radius:var(--slider-border-radius);transition:var(--slider-transition);background-color:#0000}&.hue::-moz-range-track{background:var(--bg-hue)}&.opacity::-moz-range-track{background:linear-gradient(to right, transparent, var(--color)), var(--checkerboard)}}& datalist{transition:var(--slider-transition);appearance:none;padding:0 var(--slider-stepper-padding);height:var(--slider-height);pointer-events:none;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;margin:0;display:flex;position:absolute;inset:0;& option{appearance:none;width:var(--slider-tick-width);height:var(--slider-tick-height);border-radius:var(--slider-tick-radius);background:var(--figma-color-icon-tertiary);opacity:var(--slider-tick-opacity);border:0;padding:0;font-size:0;display:block;&[default]{background:var(--figma-color-icon)}&:first-child:last-child{margin:0 auto}}}&[variant=minimal]{--slider-height:.375rem;--slider-thumb-size:.75rem;--slider-tick-width:calc(var(--slider-height) / 2);--slider-tick-height:calc(var(--slider-height) / 2);--handle-transition:none;--slider-transition:none;--slider-handle-shadow:inset 0 0 0 calc(6px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0 0 0 .75px #00000013, inset 0 0 0 5px #0000001a, var(--figma-elevation-100);& .fig-slider-input-container{height:var(--slider-height);width:100%;display:block;position:relative}& fig-input-text{height:calc(var(--slider-height) * 2);background-color:#0000}&:hover,&:focus-within{& fig-input-text{height:auto}}}&[variant=neue]{--slider-height:.375rem;--slider-thumb-size:.75rem;--slider-tick-width:calc(var(--slider-height) / 2);--slider-tick-height:calc(var(--slider-height) / 2);--handle-transition:none;--slider-transition:none;--slider-handle-shadow:inset 0 0 0 calc(6px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0 0 0 .75px #00000013, inset 0 0 0 5px #0000001a, var(--figma-elevation-100);background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);padding-left:var(--spacer-2);&:not([text=true]){padding-right:var(--spacer-2)}& .fig-slider-input-container{height:var(--slider-height);width:100%;box-shadow:none;background-color:var(--figma-color-bg-tertiary);display:block;position:relative}& fig-input-text,& fig-input-number{border-left:1px solid var(--figma-color-bg);border-top-left-radius:0;border-bottom-left-radius:0;flex-basis:5rem}&:hover,&:focus-within{& fig-input-text,& fig-input-number{height:auto}}}}.dialog,dialog,.popover,[popover]{contain:layout;color:var(--figma-color-text);border-radius:var(--radius-large,.8125rem);background:var(--figma-color-bg);min-width:var(--popover-min-width);box-shadow:var(--figma-elevation-500-modal-window);border:0;outline:0;padding:0;inset:auto;& footer{padding:var(--spacer-2);justify-content:flex-end;gap:var(--spacer-2);display:flex}& p{padding:0 var(--spacer-3)}&:popover-open{display:block;outline:none!important}& header{height:var(--spacer-6);padding:var(--spacer-2);font-weight:var(--body-medium-strong-fontWeight);box-shadow:inset 0 -1px 0 0 var(--figma-color-border);align-items:center;margin:0;display:flex;& h3{font:inherit}&>:first-child{padding-left:var(--spacer-2)}}&[tooltip]{color:var(--color-tooltip);background-color:var(--bg-tooltip);padding:var(--spacer-1) var(--spacer-2);box-sizing:content-box;min-width:var(--popover-min-width);max-width:var(--popover-min-width);top:anchor(top);left:anchor(center);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--radius-medium,.3125rem);overflow:hidden;box-shadow:0 0 .5px #00000026,0 5px 12px #00000021,0 1px 3px #0000001a;line-height:1rem!important;@supports (-webkit-line-clamp:2){white-space:initial;-webkit-line-clamp:2;-webkit-box-orient:vertical}&:popover-open{display:inline-block;@supports (-webkit-line-clamp:2){display:-webkit-box}min-width:0}}}dialog[is=fig-dialog]{--z-index:999999;z-index:var(--z-index)}dialog[is=fig-popup]{contain:layout;--z-index:999999;--beak-offset:1px;z-index:var(--z-index);min-width:0;margin:0;padding:0;position:fixed;overflow:auto;&[autoresize]:not([autoresize=false]){width:max-content;max-width:calc(100vw - var(--spacer-4));max-height:calc(100vh - var(--spacer-4))}&[open]{display:block}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=menu]{background-color:var(--figma-color-bg-menu);color:var(--figma-color-text-menu);color-scheme:dark}&[variant=popover]{filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);overflow:visible;box-shadow:inset 0 .5px #ffffff1a;&:after{content:"";background-color:inherit;clip-path:path("M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z");z-index:2;pointer-events:none;width:1rem;height:6px;position:absolute}&[data-beak-side=bottom]:after{top:calc(100% - 1px);left:var(--beak-offset,50%);transform:translate(-50%)}&[data-beak-side=top]:after{top:1px;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}&[data-beak-side=left]:after{left:6px;top:var(--beak-offset,50%);transform:translate(-100%,-50%)rotate(90deg)}&[data-beak-side=right]:after{left:calc(100% - 6px);top:var(--beak-offset,50%);transform:translateY(-50%)rotate(-90deg)}}}dialog[is=fig-toast]{contain:layout paint;--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);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--figma-color-bg);justify-content:center;&[open]{display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}& fig-button:last-child{margin-right:calc(var(--spacer-2) * -1)}&[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-tooltip{display:contents}.fig-tooltip{contain:layout;inset:unset;color:var(--color-tooltip);background-color:var(--bg-tooltip);padding:var(--spacer-1) var(--spacer-2);font-weight:inherit;border-radius:var(--radius-medium,.3125rem);filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);width:max-content;max-width:180px;display:inline-block;overflow:visible;box-shadow:inset 0 .5px #ffffff1a;line-height:1rem!important;&>span{text-wrap:balance;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;width:auto;max-height:2.5rem;display:-webkit-box;overflow-y:hidden}&:after{content:"";background-color:inherit;clip-path:var(--tip-pointer);width:6px;height:3px;top:100%;left:var(--beak-offset,50%);z-index:2;position:absolute;transform:translate(-50%)}&[position=bottom]{&:after{top:0;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}}}fig-icon{display:block}fig-icon.close{contain:strict;background-color:var(--figma-color-text);width:1rem;height:1rem;clip-path:path("M11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645Z")}fig-button,fig-content,fig-slider,fig-switch,fig-input-color,fig-input-gradient,fig-input-fill,fig-checkbox,fig-radio,fig-tab,fig-tabs,fig-segmented-control,fig-input-palette{gap:var(--spacer-2);user-select:none;display:inline-flex;&[full]:not([full=false]){width:100%;display:flex}}fig-dropdown{&[full]:not([full=false]){width:100%;display:flex}}fig-checkbox,fig-radio{align-items:center;padding-top:.25rem;padding-bottom:.25rem;& label span{vertical-align:middle}}fig-switch{align-items:center;padding-top:.25rem;padding-bottom:.25rem}fig-input-color{--alpha:1}fig-header{height:var(--spacer-6);padding:var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);box-shadow:inset 0 -1px 0 0 var(--figma-color-border);align-items:center;gap:.25rem;margin:0;display:flex;& h3{font-weight:var(--body-medium-strong-fontWeight);flex-grow:1}&[borderless]{box-shadow:none}}fig-footer{justify-content:flex-end;align-items:center;gap:var(--spacer-2);height:var(--spacer-6);padding:var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);box-shadow:inset 0 1px 0 0 var(--figma-color-border);display:flex;& h3{font-weight:var(--body-medium-strong-fontWeight);align-items:baseline;gap:var(--spacer-half);flex-grow:1;display:flex}&[borderless]{box-shadow:none}&[sticky]:not([sticky=false]){z-index:10;background:var(--figma-color-bg);margin-top:auto;position:sticky;bottom:0}}fig-content{padding:var(--spacer-2) 0;display:block}vstack,.vstack,[vstack]{align-items:start;gap:var(--spacer-2);flex-flow:column wrap;display:flex}hstack,.hstack,[hstack]{gap:var(--spacer-2);flex-wrap:nowrap;align-items:start;display:flex}fig-input-text,fig-input-number{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);user-select:all;min-width:0;color:var(--figma-color-text);border:0;flex-wrap:nowrap;flex:1;justify-content:center;gap:0;display:inline-flex;&[full]:not([full=false]),&[multiline]{width:100%;display:flex}&[autoresize] input,&[autoresize] textarea{field-sizing:content}&[resizable] input,&[resizable] textarea{resize:both}&[resizable]:has(textarea[style*=width]),&[resizable]:has(textarea[style*=height]),&[resizable]:has(input[style*=width]),&[resizable]:has(input[style*=height]){flex:unset}& label,& [slot]{flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;display:flex}& [slot]{user-select:none;width:1.5rem;color:var(--figma-color-text-secondary)}& [slot=prepend]{margin-right:calc(var(--spacer-2) * -1);padding-right:0}& [slot=append]{margin-left:calc(var(--spacer-2) * -1);padding-left:0}& input{flex:1;background-color:#0000!important;&:focus,&:active{box-shadow:none!important}}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&:hover{box-shadow:inset 0 0 0 1px var(--figma-color-border)}&[disabled]:not([disabled=false]){background-color:var(--figma-color-bg);pointer-events:none;cursor:not-allowed;color:var(--figma-color-text-disabled);box-shadow:inset 0 0 0 1px var(--figma-color-border-disabled);& [slot]{color:var(--figma-color-text-disabled)}}}fig-input-number>[slot],fig-input-text[type=number]>[slot]{cursor:ew-resize!important}fig-input-color,fig-input-gradient,fig-input-fill{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);box-shadow:none!important;&:focus,&:focus-within,&.has-popup-open{outline:1px solid var(--figma-color-border-selected)!important;outline-offset:-1px!important}&:hover{outline:1px solid var(--figma-color-border);outline-offset:-1px!important}&>.input-combo>fig-chit:not(:only-child),&>.input-combo>fig-chit:not(:only-child) input,&>.input-combo>fig-fill-picker:not(:only-child),&>.input-combo>fig-fill-picker:not(:only-child)>fig-chit>input,&>.input-combo>label,& fig-fill-picker:not(:only-child),& fig-input-text,& fig-chit{&,&:focus,&:hover{--selected:0;box-shadow:none!important;background-color:#0000!important;border:0!important}}& fig-chit~fig-input-text>input,& fig-chit~label,& fig-fill-picker~fig-input-text>input,& fig-fill-picker~label{padding-left:0!important}&>.input-combo{flex:1;min-width:0}& fig-input-number{flex:0 3rem;box-shadow:inset 1px 0 0 0 var(--figma-color-bg)!important;background-color:#0000!important}&[disabled]:not([disabled=false]){& .input-combo{gap:0}}fig-field[direction=horizontal] &{flex:1;min-width:0}}fig-input-gradient{--height:1.5rem;height:var(--height);width:100%;min-width:0;position:relative;&:focus,&:active,&:focus-within{outline:1px solid var(--figma-color-border-selected)!important;outline-offset:-1px!important}&>fig-chit{--padding:0;--width:100%;flex:auto;width:100%!important;min-width:0!important}& .fig-input-gradient-track{pointer-events:auto;z-index:1;align-items:center;display:flex;position:absolute;inset:0;& fig-handle{pointer-events:auto;cursor:default;&:hover{z-index:5}}}}fig-input-palette{gap:var(--spacer-2);flex-direction:column;min-width:0;display:inline-flex!important;& .palette-colors{border-radius:var(--radius-medium);flex-wrap:nowrap;grid-area:inputs;gap:0;width:100%;min-width:0;display:flex;overflow:hidden}& .palette-add-btn{grid-area:button}& .palette-colors-inline{border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);grid-template-columns:1fr 24px;grid-template-areas:"inputs button";width:100%;display:inline-grid!important;& .palette-colors{background-color:var(--figma-color-bg-secondary);display:flex;& fig-input-color{width:100%}& fig-chit{--padding:0px;--border-radius:0px;--width:100%;min-width:0;height:var(--size);flex:1;border-radius:0!important;width:100%!important;& input,&:before,&:after{border-radius:0!important;padding:0!important}}}}&[expanded]:not([expanded=false]):not([edit=false]){& .palette-colors-expanded{display:flex}}&[add=false]{& .palette-colors-expanded,& .palette-colors-inline{grid-template-areas:"inputs inputs"}}& .palette-colors-expanded{gap:var(--spacer-2);border-radius:0;flex-direction:column;width:100%;display:none;overflow:visible;&>fig-input-color{min-width:0}& fig-chit{--border-radius:var(--radius-medium);height:var(--size);border-radius:var(--radius-medium)!important;width:auto!important}}}fig-field[direction=horizontal]:has(>fig-input-palette){padding-right:var(--spacer-2)}fig-slider{display:flex;& .slider{flex-grow:1}& fig-input-number{flex-basis:5rem}fig-field[direction=horizontal] &{flex:1;min-width:0}}fig-field,.fig-field{--field-label-width:4rem;padding:var(--spacer-1) var(--spacer-3);flex-direction:column;align-items:start;gap:0;margin:0;display:flex;&[direction=horizontal]{align-items:center;gap:var(--spacer-2);flex-direction:row}&>[full]{flex:auto}&:not(:has(>label))>[full]:not([full=false]){align-self:stretch;width:100%}&>label{padding:var(--spacer-1) 0;min-height:calc(1rem + var(--spacer-1) * 2);flex:0;justify-content:space-between;align-items:center;width:100%;display:flex}&[direction=horizontal]>label{width:auto;min-width:var(--field-label-width);max-width:var(--field-label-width);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}&[direction=horizontal]{gap:var(--spacer-2);flex-direction:row;align-items:start;&>label{min-width:4rem}&[columns=thirds]{gap:var(--spacer-2);grid-template-columns:repeat(3,1fr);display:grid;&>label{grid-column:1}&>label~*{grid-column:2/span 2}&:not(:has(>label))>*{grid-column:1/-1}}&[columns=half]{gap:var(--spacer-2);grid-template-columns:repeat(2,1fr);display:grid;&>label{grid-column:1}&>label~*{grid-column:2/span 2}&:not(:has(>label))>*{grid-column:1/-1}}}}fig-field-slider{--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative;& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}& fig-field{padding-left:var(--spacer-2-5);position:relative;&[direction=horizontal]>label{flex:auto;width:100%;min-width:0;max-width:none}& fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important;&:has(input[type=range]:focus-within){--slider-thumb-outline:1.5px solid var(--figma-color-border-selected)!important;--slider-thumb-outline-offset:2px!important}& .fig-slider-input-container{box-shadow:none!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}}&:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{border-radius:0!important}}&:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}&[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important;&:hover,&:has(input:focus){box-shadow:none!important}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)!important}& input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}}fig-spinner{background-color:var(--figma-color-icon-tertiary);width:1rem;height:1rem;clip-path:path("M15.9995 7.86066C16.0271 9.44267 15.585 10.9973 14.729 12.3281C13.8731 13.6588 12.6417 14.7058 11.1907 15.3368C9.73968 15.9677 8.13415 16.1542 6.57716 15.8726C5.02016 15.591 3.58161 14.8541 2.44344 13.755C1.30526 12.6559 0.518574 11.2439 0.182856 9.69769C-0.152862 8.15147 -0.0225313 6.54042 0.557366 5.06826C1.13726 3.59611 2.14068 2.32898 3.44073 1.4271C4.74079 0.525221 6.27908 0.0291073 7.86109 0.00149397L7.87922 1.04037C6.50268 1.06439 5.16418 1.49607 4.03298 2.28081C2.90177 3.06556 2.02868 4.16812 1.5241 5.44907C1.01952 6.73002 0.906114 8.13183 1.19823 9.47724C1.49034 10.8226 2.17486 12.0512 3.16521 13.0076C4.15556 13.9639 5.40727 14.6052 6.76204 14.8502C8.11682 15.0951 9.51382 14.9329 10.7764 14.3839C12.0389 13.8349 13.1104 12.9239 13.8552 11.766C14.5999 10.6081 14.9846 9.25533 14.9606 7.87879L15.9995 7.86066Z");animation:1s linear infinite fig-spinner-spin;display:inline-flex}.segmented-control,fig-segmented-control{contain:layout paint;user-select:none;background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);--seg-indicator-x:0px;--seg-indicator-w:0px;--seg-indicator-opacity:0;--seg-indicator-transition-duration:0s;border:0;align-items:stretch;gap:0;height:1.5rem;padding:1px;display:inline-flex;position:relative;overflow:hidden;&:before{content:"";width:var(--seg-indicator-w);height:calc(100% - 2px);transform:translateX(var(--seg-indicator-x));border-radius:calc(var(--radius-medium) - 1px);background-color:var(--figma-color-bg);box-shadow:0 0 0 1px var(--figma-color-border);opacity:var(--seg-indicator-opacity);pointer-events:none;z-index:0;transition:transform var(--seg-indicator-transition-duration) ease, width var(--seg-indicator-transition-duration) ease, opacity .12s ease;position:absolute;top:1px;left:0}& fig-segment{z-index:1;appearance:none;color:var(--figma-color-text-secondary);padding:0 var(--spacer-2);flex:1 1 0;justify-content:center;align-items:center;transition:none;display:flex;position:relative;&[selected]:not([selected=false]),&[selected=true]{color:var(--figma-color-text);background-color:var(--figma-color-bg);border-radius:calc(var(--radius-medium) - 1px);box-shadow:0 0 0 1px var(--figma-color-border)}& svg{& [fill]{fill:currentColor}& [stroke]:not([stroke=none]){stroke:currentColor}}}&:not([sizing]),&[sizing=""],&[sizing=equal]{& fig-segment{flex:1 1 0}}&[sizing=auto]{flex:none;width:fit-content;max-width:100%;display:inline-flex;&[full]:not([full=false]){flex:none;align-self:auto;width:fit-content;display:inline-flex}& fig-segment{flex:none}}&[animated]:not([animated=false]){& fig-segment{&[selected]:not([selected=false]),&[selected=true]{box-shadow:none;background-color:#0000}}}&[size=large]{height:var(--spacer-5);& fig-segment{padding:0 var(--spacer-3)}}&[disabled]:not([disabled=false]){pointer-events:none;--seg-indicator-opacity:0;& fig-segment{color:var(--figma-color-text-disabled);box-shadow:none;background-color:#0000}}}@media (prefers-reduced-motion:reduce){.segmented-control:before,fig-segmented-control:before{transition:none!important}}fig-joystick{--size:100%;--aspect-ratio:1 / 1;--is-not-default:0;gap:var(--spacer-2);user-select:none;width:var(--size);flex-direction:column;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0;& fig-input-number{flex:1;width:auto}}& .joystick-values{gap:var(--spacer-2);grid-template-columns:1fr 1fr;display:grid}& .joystick-values>fig-input-number{width:100%}& .fig-input-joystick-plane-container{width:100%;aspect-ratio:var(--aspect-ratio);flex-grow:0;flex-shrink:0;place-items:center;display:flex;position:relative;&:focus{outline:0}}& .fig-joystick-reset{z-index:3;opacity:0;visibility:hidden;pointer-events:none;position:absolute;top:50%;left:50%;translate:-50% -50%;background-color:var(--figma-color-bg-secondary)!important;&:hover{& .fig-mask-icon{color:var(--figma-color-text)}}& .fig-mask-icon{--size:var(--spacer-3);color:var(--figma-color-text-tertiary)}}&:not([default]) .fig-joystick-reset{opacity:1;visibility:visible;pointer-events:auto}& .fig-joystick-axis-label{z-index:1;pointer-events:none;user-select:none;color:var(--figma-color-text-tertiary);letter-spacing:.01em;text-shadow:1px 0 0 var(--figma-color-bg-secondary), -1px 0 0 var(--figma-color-bg-secondary), 0 1px 0 var(--figma-color-bg-secondary), 0 -1px 0 var(--figma-color-bg-secondary);font-size:10px;font-weight:700;line-height:1;position:absolute;&.top{top:var(--spacer-2);left:50%;transform:translate(-50%)}&.bottom{bottom:var(--spacer-2);left:50%;transform:translate(-50%)}&.left{left:var(--spacer-2);transform-origin:50%;top:50%;transform:translateY(-50%)rotate(-90deg);&.no-rotate{transform:translateY(-50%)}}&.right{right:var(--spacer-2);transform-origin:50%;top:50%;transform:translateY(-50%)rotate(90deg)}}& .fig-input-joystick-plane{flex-shrink:0;place-items:center;width:100%;height:100%;display:inline-grid;position:relative}& .fig-input-joystick-plane>*{grid-area:1/1}& .fig-input-joystick-guides{width:var(--size);height:var(--size);border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);position:absolute;overflow:hidden;&:before{content:"";border-left:1px solid var(--figma-color-border);pointer-events:none;height:calc(100% - 2px);position:absolute;top:1px;left:calc(50% - .5px)}&:after{content:"";border-top:1px solid var(--figma-color-border);pointer-events:none;width:calc(100% - 2px);position:absolute;top:calc(50% - .5px);left:1px}}& .fig-input-joystick-plane.dragging .fig-input-joystick-guides{background:linear-gradient(45deg, transparent calc(50% - .5px), var(--figma-color-border) calc(50% - .5px), var(--figma-color-border) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--figma-color-border) calc(50% - .5px), var(--figma-color-border) calc(50% + .5px), transparent calc(50% + .5px)), var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}& .fig-input-joystick-plane-container:focus .fig-input-joystick-guides{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}& fig-handle{z-index:4;position:absolute}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field[direction=horizontal] &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus,&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}fig-layer{--indent:var(--spacer-2);color:var(--figma-color-text);user-select:none;border-radius:var(--radius-medium);width:100%;display:block;position:relative;&:has(fig-layer){&>.fig-layer-row{&>.fig-layer-chevron{visibility:visible}}}&>.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);margin-left:0;display:flex;position:relative;& .fig-layer-chevron{mask-image:var(--icon-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}&:hover{background:var(--figma-color-bg-secondary);& .fig-layer-actions{opacity:1}}& .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}&>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}}& .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex;&>*{flex-shrink:0}}&>fig-layer{padding-left:var(--indent);margin-top:1px}&:not([open])>fig-layer,&[open=false]>fig-layer{display:none}&[open]:not([open=false]){&>.fig-layer-row>.fig-layer-chevron{rotate:0deg}}&[visible=false]>.fig-layer-row{&>label{color:var(--figma-color-text-tertiary)}}&[selected]:not([selected=false]){&>.fig-layer-row{background:var(--figma-color-bg-selected);&>.fig-layer-icon{color:var(--figma-color-icon)}}}}@keyframes fig-shimmer-text{0%{background-position:var(--shimmer-text-from,100% 0%)}to{background-position:var(--shimmer-text-to,0% 0%)}}@keyframes fig-shimmer-mask{0%{mask-position:var(--shimmer-mask-from,100% 0%)}to{mask-position:var(--shimmer-mask-to,0% 0%)}}fig-shimmer{--shimmer-angle:90deg;--shimmer-size:250% 100%;--shimmer-duration:1.5s;--shimmer-mask-from:100% 0%;--shimmer-mask-to:0% 0%;--shimmer-text-from:100% 0%;--shimmer-text-to:0% 0%;--shimmer-subtle-fill-color:var(--figma-color-bg-transparent);--shimmer-bright-fill-color:var(--figma-color-bg-tertiary);--shimmer-subtle-text-color:var(--figma-color-text-tertiary);--shimmer-bright-text-color:var(--figma-color-text);display:contents;&[direction=vertical]{--shimmer-angle:180deg;--shimmer-size:100% 250%;--shimmer-mask-from:0% 100%;--shimmer-text-from:0% 100%}&[direction=diagonal]{--shimmer-angle:135deg;--shimmer-size:250% 250%}&[playing=false] *{background:0 0;background-size:unset;animation:none}&[playing=false] :where(:not(:has(*)):not(:empty)){-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:unset}&:not([playing=false]) :where(:has(*),:empty){mask:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-fill-color) 0%, var(--shimmer-subtle-fill-color) 40%, var(--shimmer-bright-fill-color) 50%, var(--shimmer-subtle-fill-color) 60%, var(--shimmer-subtle-fill-color) 100%);mask-size:var(--shimmer-size);animation:fig-shimmer-mask var(--shimmer-duration) linear infinite}&:not([playing=false]) :where(:not(:has(*)):not(:empty)){background:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-text-color) 0%, var(--shimmer-subtle-text-color) 40%, var(--shimmer-bright-text-color) 50%, var(--shimmer-subtle-text-color) 60%, var(--shimmer-subtle-text-color) 100%);background-size:var(--shimmer-size);animation:fig-shimmer-text var(--shimmer-duration) linear infinite;mask:none;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important}}fig-skeleton{--shimmer-angle:90deg;--shimmer-size:250% 100%;--shimmer-duration:1.5s;--shimmer-mask-from:100% 0%;--shimmer-mask-to:0% 0%;--shimmer-subtle-mask-color:#000000bf;--shimmer-bright-mask-color:#000;display:contents;&[direction=vertical]{--shimmer-angle:180deg;--shimmer-size:100% 400%;--shimmer-mask-from:0% 100%}&[direction=diagonal]{--shimmer-angle:135deg;--shimmer-size:250% 250%}&:not([playing=false]) *{mask:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-mask-color) 0%, var(--shimmer-subtle-mask-color) 40%, var(--shimmer-bright-mask-color) 50%, var(--shimmer-subtle-mask-color) 60%, var(--shimmer-subtle-mask-color) 100%);mask-size:var(--shimmer-size);animation:fig-shimmer-mask var(--shimmer-duration) linear infinite;& *{color:#0000}}& label,& h3,& h2,& p,& span{background:var(--figma-color-bg-secondary);border-radius:var(--radius-medium)}& :not(fig-field,fig-header){border-radius:var(--radius-medium);pointer-events:none;user-select:none;background:var(--figma-color-bg-secondary)!important;box-shadow:none!important;color:var(--figma-color-bg-secondary)!important}& ::placeholder{color:#0000!important}& :after,& :before,& ::marker,& ::picker-icon,& ::-webkit-slider-thumb,& ::-webkit-slider-runnable-track,& ::-webkit-color-swatch,& ::-webkit-color-swatch-wrapper,& ::-webkit-details-marker,& ::-webkit-inner-spin-button,& ::-webkit-outer-spin-button,& ::-webkit-calendar-picker-indicator{display:none!important}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}fig-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:0 var(--spacer-3);margin-top:var(--spacer-2);margin-bottom:var(--spacer-2);border-radius:var(--radius-medium);place-items:center;display:inline-grid;position:relative;&:before,&:after,&>*{border-radius:inherit;grid-area:1/1;place-self:center;width:100%;height:100%}&:after{content:"";box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);grid-area:1/1;place-self:center}}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0;&>fig-header{padding:var(--spacer-2);justify-content:space-between;align-items:center;display:flex}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}&>fig-content{padding-bottom:var(--spacer-2-5)}& .fig-fill-picker-type-label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--figma-color-text);padding:var(--spacer-1) var(--spacer-2)}& .fig-fill-picker-gamut{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-color-area{& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;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}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-mode{width:3.5rem}& .fig-fill-picker-input-fields{flex:1;min-width:0;display:flex;& .input-combo,& fig-input-text{flex:1;min-width:0}}}& .fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:1;min-width:0}&>:last-child fig-button{margin-left:auto}& .fig-fill-picker-gradient-center{& fig-input-number{width:48px}}}& .fig-fill-picker-gradient-bar{background:linear-gradient(90deg,#d9d9d9 0%,#737373 100%)}& .fig-fill-picker-gradient-stops-handles{pointer-events:none;position:absolute;inset:0}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);&>.fig-fill-picker-stop-position{flex: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-fill-picker-media-header{& .fig-fill-picker-scale-mode{flex:1}& .fig-fill-picker-scale{width:56px}}& .fig-fill-picker-media-preview{aspect-ratio:1;margin:var(--spacer-1) var(--spacer-3);border-radius:var(--radius-medium);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-button{visibility:hidden}&:hover{& fig-button{visibility:visible}}}}& .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}& .fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& .fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin-bottom:var(--spacer-2);position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}& .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{gap:var(--spacer-1);display:flex;& .fig-fill-picker-camera-select{flex:1}& .fig-fill-picker-webcam-capture{flex-shrink:0}}}.fig-mask-icon{contain:strict;--size:var(--spacer-4);--icon:var(--icon-add);width:var(--size);height:var(--size);mask-image:var(--icon);mask-position:50%;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-image:var(--icon);background:currentColor;display:inline-flex;-webkit-mask-position:50%;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}@keyframes fig-spinner-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}fig-chooser{--chooser-fade-size:var(--spacer-4);scrollbar-width:none;scroll-snap-type:y mandatory;flex-direction:column;gap:1px;display:flex;overflow:visible auto;&>*{scroll-snap-align:start}&[padding=false]{gap:var(--spacer-2);& fig-choice{--fig-choice-padding:0px}}&[overflow=scrollbar]{scrollbar-width:thin;scrollbar-color:var(--figma-color-border) transparent}&[layout=horizontal]{scrollbar-width:none;flex-flow:row;overflow:auto hidden;&[overflow=scrollbar]{scrollbar-width:thin;scrollbar-color:var(--figma-color-border) transparent}&>:not(.fig-chooser-nav-start):not(.fig-chooser-nav-end){flex:1}& fig-image[full]{min-width:3rem}}&[layout=grid]{grid-template-columns:1fr 1fr;display:grid;&>*{width:100%;min-width:0}&>.fig-chooser-nav-start,&>.fig-chooser-nav-end{grid-column:1/-1}}&[full]:not([full=false]){width:100%}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.4}& .fig-chooser-nav-start,& .fig-chooser-nav-end{all:unset;z-index:3;cursor:pointer;opacity:0;pointer-events:none;color:var(--figma-color-icon);flex-shrink:0;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:sticky;&:hover{background:var(--figma-color-bg)!important}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-chevron);background:currentColor;display:block;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}& .fig-chooser-nav-start{width:100%;height:var(--chooser-fade-size);margin-bottom:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to bottom, var(--eased-fade-stops));top:0;left:0;right:0;&:hover{box-shadow:0 1px 0 0 var(--figma-color-border)!important}&:after{rotate:180deg}}& .fig-chooser-nav-end{width:100%;height:var(--chooser-fade-size);margin-top:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to top, var(--eased-fade-stops));bottom:0;left:0;right:0;&:hover{box-shadow:0 -1px 0 0 var(--figma-color-border)!important}}&[layout=horizontal]{& .fig-chooser-nav-start,& .fig-chooser-nav-end{height:auto;width:var(--chooser-fade-size);align-self:stretch;margin:0;top:0;bottom:0}& .fig-chooser-nav-start{margin-right:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to right, var(--eased-fade-stops));left:0;right:auto;&:hover{box-shadow:1px 0 0 0 var(--figma-color-border)!important}&:after{rotate:90deg}}& .fig-chooser-nav-end{margin-left:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to left, var(--eased-fade-stops));left:auto;right:0;&:hover{box-shadow:-1px 0 0 0 var(--figma-color-border)!important}&:after{rotate:-90deg}}}&.overflow-start>.fig-chooser-nav-start,&.overflow-end>.fig-chooser-nav-end{opacity:1;pointer-events:auto}}fig-choice{--fig-choice-selection-ring-width:1.25px;--fig-choice-padding:var(--spacer-2);--fig-choice-border-radius:calc(var(--radius-medium) + var(--fig-choice-padding));border-radius:var(--fig-choice-border-radius);align-items:center;gap:var(--spacer-2);cursor:default;padding:var(--fig-choice-padding);border:1px solid #0000;outline:none;flex-direction:column;display:flex;&:hover:not([selected]):not([disabled]):not([aria-disabled=true]){background-color:var(--figma-color-bg-secondary)}&[padding=false]{--fig-choice-padding:0px}&[selected]{position:relative;&:after{content:"";border-radius:var(--fig-choice-border-radius);pointer-events:none;z-index:1;box-shadow:inset 0 0 0 4px var(--figma-color-bg);outline:var(--fig-choice-selection-ring-width) solid var(--figma-color-border-selected);outline-offset:calc(var(--fig-choice-selection-ring-width) * -1);position:absolute;inset:0}background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]),&[aria-disabled=true]{pointer-events:none;opacity:.4;cursor:default}}fig-handle{--width:.875rem;--height:.875rem;--fill:var(--figma-color-bg-brand);--border-radius:50%;--ring-width:.125rem;--box-shadow:0px 0 0 .5px #0000001a, var(--elevation-100-canvas);--outline:none;--border:none;--fig-handle-hit-area-opacity:0;--fig-handle-hit-area-size:0;width:var(--width);height:var(--height);border-radius:var(--border-radius);place-items:center;margin:0;padding:0;display:grid;&:before{content:"";color-scheme:light only;width:var(--width);height:var(--height);background:var(--handle-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:var(--outline);border:var(--border);z-index:1;grid-area:1/1;place-self:center}&:after{content:"";color-scheme:light only;width:calc(var(--width) - var(--ring-width) * 2);height:calc(var(--height) - var(--ring-width) * 2);background:var(--fill);border-radius:var(--border-radius);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);z-index:2;grid-area:1/1;place-self:center}&[size=small]{--width:11px;--height:11px}&[drag]:not([drag=false]){touch-action:none;position:absolute}&:hover,&[selected]:not([selected=false]){outline:1px solid var(--figma-color-border-selected);outline-offset:0}&[disabled]:not([disabled=false]),&[aria-disabled=true]{pointer-events:none;cursor:default}&[type=color],&[control]{overflow:visible;& fig-color-tip{z-index:10;position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%)}}& .fig-handle-hit-area{inset:calc(var(--fig-handle-hit-area-size) * -.5px);pointer-events:auto;opacity:var(--fig-handle-hit-area-opacity,0);z-index:0;background:red;position:absolute}}fig-color-tip{--tip-selection-width:1px;--tip-selection-scale:1;--beak-offset:50%;contain:layout;inset:unset;color:var(--figma-color-text);color-scheme:light only;aspect-ratio:1;background-color:var(--figma-color-bg);border-radius:var(--radius-medium,.3125rem);filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);flex-shrink:0;place-items:center;min-width:max-content;min-height:max-content;display:inline-grid;position:relative;overflow:visible;box-shadow:inset 0 .5px #ffffff1a;&[control=add],&[control=remove]{cursor:pointer}& fig-chit{& input[type=color]{background:0 0}}&[selected]:not([selected=false]):before{content:"";background:var(--figma-color-border-selected);clip-path:var(--tip-pointer);width:6px;height:3px;top:100%;left:var(--beak-offset,50%);z-index:1;pointer-events:none;transform:translate(-50%, 0) scale(var(--tip-selection-scale));transform-origin:50% 0;position:absolute}&:after{content:"";background-color:inherit;clip-path:var(--tip-pointer);width:6px;height:3px;top:calc(100% - 1px);left:var(--beak-offset,50%);z-index:3;position:absolute;transform:translate(-50%)}&[position=bottom]{&[selected]:not([selected=false]):before{top:1px;left:var(--beak-offset,50%);transform:translate(-50%, -100%) scale(var(--tip-selection-scale)) scaleY(-1);transform-origin:50% 100%}&:after{top:1px;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}}}fig-canvas-point{--fig-canvas-point-line-stroke:#ffffff80;--fig-canvas-point-line-stroke-hover:var(--figma-color-bg-brand);--fig-canvas-point-line-stroke-active:var(--figma-color-bg-brand);--fig-canvas-point-line-stroke-width:1.5px;display:contents;&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& .fig-canvas-point-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-point-line-stroke);stroke-width:var(--fig-canvas-point-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-point-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none;&:hover~circle{stroke:var(--fig-canvas-point-line-stroke-hover)}}}&:has(.fig-canvas-point-radius-hit:hover) .fig-canvas-point-angle-line,&.fig-canvas-point-ring-active .fig-canvas-point-angle-line,&.fig-canvas-point-ring-active .fig-canvas-point-radius circle:not(.fig-canvas-point-radius-hit){stroke:var(--fig-canvas-point-line-stroke-active)}& .fig-canvas-point-angle-svg{pointer-events:none}& .fig-canvas-point-angle-line{stroke:var(--fig-canvas-point-line-stroke);stroke-width:var(--fig-canvas-point-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}
1
+ html,:host{width:100%;height:100%;color:var(--figma-color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family);font-size:16px;font-weight:var(--body-medium-fontWeight);letter-spacing:var(--body-letter-spacing);background-color:var(--figma-color-bg);margin:0;padding:0}body,:host{font-size:var(--body-medium-fontSize);letter-spacing:var(--body-letter-spacing)}h1,h2{font-weight:var(--body-large-strong-fontWeight);font-size:var(--body-large-fontSize)}h3{font-weight:var(--body-medium-strong-fontWeight);font-size:var(--body-medium-fontSize)}hr{background-color:var(--figma-color-border);height:1px;margin:var(--spacer-2) 0;border:none;&[vertical]{width:1px;height:100%;margin:0 var(--spacer-2)}}*,:before,:after{box-sizing:border-box}::selection{background-color:var(--figma-color-text-selection)}::selection{background-color:var(--figma-color-text-selection)}::-webkit-scrollbar{width:var(--spacer-1);height:var(--spacer-1)}::-webkit-scrollbar-thumb{background-color:var(--figma-color-bg-tertiary);border-radius:calc(var(--spacer-1) / 2)}::-webkit-scrollbar-thumb:hover{background-color:var(--figma-color-bg-secondary)}*{scrollbar-width:thin;scrollbar-color:var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary)}.subtle{color:var(--figma-color-text-tertiary)}p{margin:var(--spacer-2) 0;color:var(--figma-color-text-secondary);line-height:1rem}label{color:var(--figma-color-text-secondary)}h2{font-weight:var(--body-medium-strong-fontWeight);margin:var(--spacer-2) 0}:root,:host{color-scheme:light dark;--figma-color-bg:light-dark(#fff,#2c2c2c);--figma-color-bg-brand:light-dark(#0d99ff,#0c8ce9);--figma-color-bg-menu:#1e1e1e;--figma-color-bg-menu-hover:#0c8ce9;--figma-color-bg-brand-hover:light-dark(#007be5,#0a6dc2);--figma-color-bg-brand-pressed:light-dark(#0768cf,#105cad);--figma-color-bg-brand-secondary:light-dark(#0768cf,#105cad);--figma-color-bg-brand-tertiary:light-dark(#e5f4ff,#394360);--figma-color-bg-component:light-dark(#9747ff,#8a38f5);--figma-color-bg-component-hover:light-dark(#8638e5,#7a2ed6);--figma-color-bg-component-pressed:light-dark(#8638e5,#7a2ed6);--figma-color-bg-component-secondary:light-dark(#7c2bda,#652ca8);--figma-color-bg-component-tertiary:light-dark(#f1e5ff,#473956);--figma-color-bg-danger:light-dark(#f24822,#e03e1a);--figma-color-bg-danger-hover:light-dark(#dc3412,#c4381c);--figma-color-bg-danger-pressed:light-dark(#dc3412,#c4381c);--figma-color-bg-danger-secondary:light-dark(#bd2915,#963323);--figma-color-bg-danger-tertiary:light-dark(#ffe2e0,#60332a);--figma-color-bg-disabled:light-dark(#d9d9d9,#757575);--figma-color-bg-disabled-secondary:#b3b3b3;--figma-color-bg-hover:light-dark(#f5f5f5,#383838);--figma-color-bg-inverse:light-dark(#2c2c2c,#fff);--figma-color-bg-onselected:light-dark(#bde3ff,#679);--figma-color-bg-onselected-hover:light-dark(#bde3ff,#679);--figma-color-bg-onselected-pressed:light-dark(#bde3ff,#679);--figma-color-bg-pressed:light-dark(#f5f5f5,#383838);--figma-color-bg-secondary:light-dark(#f5f5f5,#383838);--figma-color-bg-selected:light-dark(#e5f4ff,#4a5878);--figma-color-bg-selected-hover:light-dark(#bde3ff,#536383);--figma-color-bg-selected-pressed:light-dark(#bde3ff,#536383);--figma-color-bg-selected-secondary:light-dark(#f2f9ff,#394360);--figma-color-bg-selected-strong:light-dark(#0d99ff,#0c8ce9);--figma-color-bg-selected-tertiary:light-dark(#f2f9ff,#394360);--figma-color-bg-success:light-dark(#14ae5c,#198f51);--figma-color-bg-success-hover:light-dark(#009951,#078348);--figma-color-bg-success-pressed:light-dark(#009951,#078348);--figma-color-bg-success-secondary:light-dark(#008043,#0a5c35);--figma-color-bg-success-tertiary:light-dark(#cff7d3,#476656);--figma-color-bg-tertiary:light-dark(#e6e6e6,#444);--figma-color-bg-warning:light-dark(#ffcd29,#f3c11b);--figma-color-bg-warning-hover:light-dark(#ffc21a,#f2b50d);--figma-color-bg-warning-pressed:light-dark(#ffc21a,#f2b50d);--figma-color-bg-warning-secondary:light-dark(#fab815,#e4a711);--figma-color-bg-warning-tertiary:light-dark(#fff1c2,#5c4100);--figma-color-bg-switch:light-dark(#e6e6e6,#444);--figma-color-border:light-dark(#e6e6e6,#444);--figma-color-border-brand:light-dark(#bde3ff,#105cad);--figma-color-border-brand-strong:light-dark(#007be5,#7cc4f8);--figma-color-border-component:light-dark(#e4ccff,#652ca8);--figma-color-border-component-hover:light-dark(#9747ff,#8a38f5);--figma-color-border-component-strong:light-dark(#8638e5,#d6b6fb);--figma-color-border-danger:light-dark(#ffc7c2,#963323);--figma-color-border-danger-strong:light-dark(#dc3412,#fca397);--figma-color-border-disabled:light-dark(#e6e6e6,#444);--figma-color-border-disabled-strong:light-dark(#0000004d,#fff6);--figma-color-border-menu:#383838;--figma-color-border-onbrand:light-dark(#007be5,#0a6dc2);--figma-color-border-onbrand-strong:#fff;--figma-color-border-oncomponent:light-dark(#8638e5,#7a2ed6);--figma-color-border-oncomponent-strong:#fff;--figma-color-border-ondanger:light-dark(#dc3412,#c4381c);--figma-color-border-ondanger-strong:#fff;--figma-color-border-onselected:light-dark(#bde3ff,#679);--figma-color-border-onselected-strong:light-dark(#000000e5,#ffffffe5);--figma-color-border-onsuccess:light-dark(#009951,#078348);--figma-color-border-onsuccess-strong:#fff;--figma-color-border-onwarning:light-dark(#fab815,#e4a711);--figma-color-border-onwarning-strong:#000000e5;--figma-color-border-selected:light-dark(#0d99ff,#0c8ce9);--figma-color-border-selected-strong:light-dark(#007be5,#7cc4f8);--figma-color-border-strong:light-dark(#2c2c2c,#ffffffe5);--figma-color-border-success:light-dark(#aff4c6,#0a5c35);--figma-color-border-success-strong:light-dark(#009951,#79d297);--figma-color-border-warning:light-dark(#ffe8a3,#925711);--figma-color-border-warning-strong:light-dark(#b86200,#f7d15f);--figma-color-icon:light-dark(#000000e5,#fff);--figma-color-icon-brand:light-dark(#007be5,#7cc4f8);--figma-color-icon-brand-pressed:light-dark(#0768cf,#0c8ce9);--figma-color-icon-brand-secondary:light-dark(#80caff,#0a6dc2);--figma-color-icon-brand-tertiary:light-dark(#bde3ff,#394360);--figma-color-icon-component:light-dark(#8638e5,#d1a8ff);--figma-color-icon-component-pressed:light-dark(#7c2bda,#d6b6fb);--figma-color-icon-component-secondary:light-dark(#c5b2dc,#7f699b);--figma-color-icon-component-tertiary:light-dark(#c5b2dc,#7f699b);--figma-color-icon-danger:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-hover:light-dark(#bd2915,#fbbcb6);--figma-color-icon-danger-pressed:light-dark(#bd2915,#fbbcb6);--figma-color-icon-danger-secondary:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-secondary-hover:light-dark(#f24822,#e03e1a);--figma-color-icon-danger-tertiary:light-dark(#f24822,#e03e1a);--figma-color-icon-disabled:light-dark(#0000004d,#fff6);--figma-color-icon-hover:light-dark(#000000e5,#fff);--figma-color-icon-onbrand:#fff;--figma-color-icon-onbrand-secondary:#fffc;--figma-color-icon-onbrand-tertiary:#fff6;--figma-color-icon-oncomponent:#fff;--figma-color-icon-oncomponent-secondary:#fffc;--figma-color-icon-oncomponent-tertiary:#fff6;--figma-color-icon-ondanger:#fff;--figma-color-icon-ondanger-secondary:#fffc;--figma-color-icon-ondanger-tertiary:#fff6;--figma-color-icon-ondisabled:light-dark(#fff,#2c2c2c);--figma-color-icon-oninverse:light-dark(#ffffffe5,#000000e5);--figma-color-icon-onselected:light-dark(#000000e5,#fff);--figma-color-icon-onselected-secondary:light-dark(#00000080,#ffffffb2);--figma-color-icon-onselected-strong:#fff;--figma-color-icon-onselected-tertiary:light-dark(#0000004d,#fff6);--figma-color-icon-onsuccess:#fff;--figma-color-icon-onsuccess-secondary:#fffc;--figma-color-icon-onsuccess-tertiary:#fff6;--figma-color-icon-onwarning:#000000e5;--figma-color-icon-onwarning-secondary:#00000080;--figma-color-icon-onwarning-tertiary:#0000004d;--figma-color-icon-pressed:light-dark(#007be5,#0a6dc2);--figma-color-icon-secondary:light-dark(#00000080,#ffffffb2);--figma-color-icon-secondary-hover:light-dark(#000000e5,#fff);--figma-color-icon-selected:light-dark(#007be5,#7cc4f8);--figma-color-icon-selected-secondary:light-dark(#007be5,#7cc4f8);--figma-color-icon-selected-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-icon-success:light-dark(#14ae5c,#198f51);--figma-color-icon-success-pressed:light-dark(#008043,#a1e8b9);--figma-color-icon-success-secondary:light-dark(#14ae5c,#198f51);--figma-color-icon-success-tertiary:light-dark(#14ae5c,#198f51);--figma-color-icon-tertiary:light-dark(#0000004d,#fff6);--figma-color-icon-tertiary-hover:light-dark(#000000e5,#fff);--figma-color-icon-warning:light-dark(#ffcd29,#f3c11b);--figma-color-icon-warning-pressed:light-dark(#b86200,#f7d15f);--figma-color-icon-warning-secondary:light-dark(#ffcd29,#f3c11b);--figma-color-icon-warning-tertiary:light-dark(#ffcd29,#f3c11b);--figma-color-text:light-dark(#000000e5,#fff);--figma-color-text-brand:light-dark(#007be5,#7cc4f8);--figma-color-text-brand-secondary:light-dark(#007be5,#7cc4f8);--figma-color-text-brand-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-text-component:light-dark(#8638e5,#d1a8ff);--figma-color-text-component-pressed:light-dark(#7c2bda,#d6b6fb);--figma-color-text-component-secondary:light-dark(#c5b2dc,#7f699b);--figma-color-text-component-tertiary:light-dark(#c5b2dc,#7f699b);--figma-color-text-danger:light-dark(#dc3412,#fca397);--figma-color-text-danger-secondary:light-dark(#dc3412,#fca397);--figma-color-text-danger-tertiary:light-dark(#dc3412,#fca397);--figma-color-text-disabled:light-dark(#0000004d,#fff6);--figma-color-text-hover:light-dark(#000000e5,#fff);--figma-color-text-onbrand:#fff;--figma-color-text-onbrand-secondary:#fffc;--figma-color-text-onbrand-tertiary:#fff6;--figma-color-text-oncomponent:#fff;--figma-color-text-oncomponent-secondary:#fffc;--figma-color-text-oncomponent-tertiary:#fff6;--figma-color-text-ondanger:#fff;--figma-color-text-ondanger-secondary:#fffc;--figma-color-text-ondanger-tertiary:#fff6;--figma-color-text-ondisabled:light-dark(#fff,#2c2c2c);--figma-color-text-oninverse:light-dark(#ffffffe5,#000000e5);--figma-color-text-onselected:light-dark(#000000e5,#ffffffe5);--figma-color-text-onselected-secondary:light-dark(#00000080,#ffffffb2);--figma-color-text-onselected-strong:#fff;--figma-color-text-onselected-tertiary:light-dark(#0000004d,#fff6);--figma-color-text-onsuccess:#fff;--figma-color-text-onsuccess-secondary:#fffc;--figma-color-text-onsuccess-tertiary:#fff6;--figma-color-text-onwarning:#000000e5;--figma-color-text-onwarning-secondary:#00000080;--figma-color-text-onwarning-tertiary:#0000004d;--figma-color-text-secondary:light-dark(#00000080,#ffffffb2);--figma-color-text-secondary-hover:light-dark(#000000e5,#fff);--figma-color-text-selection:#0d99ff66;--figma-color-text-selected:light-dark(#007be5,#7cc4f8);--figma-color-text-selected-secondary:light-dark(#007be5,#7cc4f8);--figma-color-text-selected-tertiary:light-dark(#007be5,#7cc4f8);--figma-color-text-success:light-dark(#009951,#79d297);--figma-color-text-success-secondary:light-dark(#009951,#79d297);--figma-color-text-success-tertiary:light-dark(#009951,#79d297);--figma-color-text-tertiary:light-dark(#0000004d,#fff6);--figma-color-text-tertiary-hover:light-dark(#000000e5,#fff);--figma-color-text-warning:light-dark(#b86200,#f7d15f);--figma-color-text-warning-secondary:light-dark(#b86200,#f7d15f);--figma-color-text-warning-tertiary:light-dark(#b86200,#f7d15f);--figma-color-text-menu:#fff;--figma-color-text-menu-secondary:#ffffffb3;--figma-color-text-menu-tertiary:#fff6;--font-size:16px;--font-family:"Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;--body-medium-fontSize:.6875rem;--body-large-fontSize:.8125rem;--body-letter-spacing:.055px;--body-medium-strong-fontWeight:550;--body-large-strong-fontWeight:500;--body-medium-fontWeight:450;--spacer-1:.25rem;--spacer-2:.5rem;--spacer-2-5:.75rem;--spacer-3:1rem;--spacer-4:1.5rem;--spacer-5:2rem;--spacer-6:2.5rem;--radius-none:0;--radius-small:.125rem;--radius-medium:.3125rem;--radius-large:.8125rem;--figma-radius-none:var(--radius-none);--figma-radius-small:var(--radius-small);--figma-radius-medium:var(--radius-medium);--figma-radius-large:var(--radius-large);--input-transition:all 80ms ease-out;--popover-min-width:15rem;--handle-color:#fff;--bg-selected:#f5f5f5;--bg-selected-active:#e5f4ff;--bg-tooltip:#1e1e1e;--color-tooltip:#fff;--figma-color-bordertranslucent:light-dark(#0000001a,#ffffff1a);--figma-color-bg-transparent:light-dark(#0000000d,#ffffff0d);--figma-color-bg-transparent-hover:light-dark(#0000000d,#ffffff0d);--figma-color-bg-transparent-pressed:light-dark(#0000001a,#ffffff1a);--figma-color-bg-transparent-secondary:light-dark(#0003,#fff3);--eased-fade-stops:var(--figma-color-bg) 0%, color-mix(in oklch, var(--figma-color-bg) 99.9%, transparent) 10%, color-mix(in oklch, var(--figma-color-bg) 99.2%, transparent) 20%, color-mix(in oklch, var(--figma-color-bg) 97.3%, transparent) 30%, color-mix(in oklch, var(--figma-color-bg) 93.6%, transparent) 40%, color-mix(in oklch, var(--figma-color-bg) 87.5%, transparent) 50%, color-mix(in oklch, var(--figma-color-bg) 78.4%, transparent) 60%, color-mix(in oklch, var(--figma-color-bg) 65.7%, transparent) 70%, color-mix(in oklch, var(--figma-color-bg) 48.8%, transparent) 80%, color-mix(in oklch, var(--figma-color-bg) 27.1%, transparent) 90%, transparent 100%;--checkerboard:repeating-conic-gradient(#0000001a 0% 25%, #ffffff1a 0% 50%) 0 0 / .66666rem .66666rem;--bg-hue:linear-gradient(90deg, red, #ff3000, #ff6000, #ff8f00, #ffbf00, #ffef00, #dfff00, #afff00, #80ff00, #50ff00, #20ff00, #00ff10, #00ff40, #00ff70, #00ff9f, #00ffcf, #0ff, #00cfff, #009fff, #0070ff, #0040ff, #0010ff, #2000ff, #5000ff, #7f00ff, #af00ff, #df00ff, #ff00ef, #ff00bf, #ff008f, #ff0060, #ff0030);--icon-chevron:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");--icon-checkmark:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");--icon-reset:url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' fill-rule='evenodd' d='M6.354 2.146a.5.5 0 0 1 0 .708L5.207 4H8.5a5 5 0 1 1-5 5 .5.5 0 0 1 1 0 4 4 0 1 0 4-4H5.207l1.147 1.146a.5.5 0 1 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2a.5.5 0 0 1 .708 0' clip-rule='evenodd'/%3E%3C/svg%3E");--icon-steppers: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 d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");--icon-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");--icon-add: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='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");--icon-minus: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='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");--icon-back: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='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");--icon-arrow-left:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--icon-forward: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='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");--icon-close: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 d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");--icon-rotate: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='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");--icon-swap: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='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");--tip-pointer:path("M3 3L0 0H6L3 3Z");--figma-elevation-100:0px 0px .5px 0px light-dark(#0000004d,#00000080), inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a), 0px 1px 3px 0px light-dark(#00000026,#0006);--figma-elevation-200:0px 0px .5px 0px light-dark(#0000002e,#0000), 0px 3px 8px 0px light-dark(#0000001a,#00000059), 0px 1px 3px 0px light-dark(#0000001a,#00000080), inset 0px .5px 0px 0px light-dark(#0000,#ffffff14), inset 0px 0px .5px 0px light-dark(#0000,#ffffff4d);--elevation-100-canvas:0 0 .5px 0 light-dark(#0000004d,#00000080), 0 .5px 0 0 light-dark(#0000,#ffffff1a) inset, 0 0 .5px 0 light-dark(#0000,#ffffff4d) inset, 0 1px 3px 0 light-dark(#00000026,#0006);--figma-elevation-400-menu-panel:0px 0px .5px 0px light-dark(#0000001f,#0000), 0px 10px 16px 0px light-dark(#0000001f,#00000059), 0px 2px 5px 0px light-dark(#00000026,#00000059), inset 0px .5px 0px 0px light-dark(#0000,#ffffff14), inset 0px .75px 0px 0px light-dark(#0000,#ffffff13);--figma-elevation-500-modal-window:0px 0px .5px 0px light-dark(#00000014,#0000), 0px 10px 24px 0px light-dark(#0000002e,#00000073), 0px 2px 5px 0px light-dark(#00000026,#0000), 0px 3px 5px 0px light-dark(#0000,#00000059), inset 0px .75px 0px 0px light-dark(#0000,#ffffff1a);--handle-shadow:0px 0px 0px .5px #0000001a, 0px 0px .5px 0px light-dark(#0000004d,#ffffff1a), 0px 1px 3px 0px light-dark(#00000026,#0000)}button,select,input,fieldset{font:inherit;align-items:center;gap:.25rem;margin:0;line-height:1rem;display:inline-flex}textarea,input[type=text],input[type=number],input[type=password],input[type=url],input[type=email],input[type=search],input[type=tel],.input{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);padding:var(--spacer-1) var(--spacer-2);box-sizing:content-box;resize:none;min-width:0;font:inherit;color:inherit;-moz-appearance:textfield;appearance:textfield;border:0;display:flex;line-height:1rem!important;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{color-scheme:inherit;-webkit-appearance:none;margin:0;display:none}}fig-input-number .fig-steppers{border-radius:0 var(--radius-medium) var(--radius-medium) 0;flex-direction:column;flex-shrink:0;display:flex;overflow:hidden;& button{appearance:none;background-color:var(--figma-color-text-secondary);cursor:pointer;border:0;flex:1;width:1.5rem;margin:0;padding:0;display:block;mask-position:50% -3.5px;mask-size:1rem;mask-repeat:no-repeat;&:hover{background-color:var(--figma-color-text)}&:active{background-color:var(--figma-color-text-tertiary)}}fig-input-number[disabled]:not([disabled=false]) & button{pointer-events:none;background-color:var(--figma-color-text-disabled)}& .fig-stepper-up{mask-image:var(--icon-chevron);rotate:180deg}& .fig-stepper-down{mask-image:var(--icon-chevron)}}textarea{box-sizing:border-box;width:100%;min-height:2rem;display:block}select,input[type=text][list]{height:var(--spacer-4);padding:0 calc(var(--spacer-2) - 1px);border-radius:var(--radius-medium);appearance:none;color:var(--figma-color-text);background-color:var(--figma-color-bg);box-shadow:inset 0 0 0 1px var(--figma-color-border);accent-color:var(--figma-color-bg-brand);white-space:nowrap;text-overflow:ellipsis;border:0;flex:1 0 0;align-items:center;display:flex;overflow:hidden;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-calendar-picker-indicator{color-scheme:inherit;opacity:0}}@supports (appearance:base-select){fig-dropdown[experimental~=modern]{&[type=dropdown]{& select:before{content:attr(aria-label)}& option::checkmark{display:none}& option{padding-left:var(--spacer-3)}}& select{--option-height:1.5rem;--max-width:20rem;@media (hover) and (pointer:fine){&,&::picker(select){appearance:base-select}}will-change:scale;padding-block:0;@supports (-webkit-touch-callout:none){font-size:16px}& option::checkmark{content:"";width:1rem;height:1rem;-webkit-mask-image:var(--icon-checkmark);mask-image:var(--icon-checkmark);background-color:currentColor;display:block;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}& option{gap:var(--spacer-1);padding:0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));font-weight:var(--body-medium-fontWeight);color:var(--figma-color-text-menu);display:flex;position:relative;& *{color:inherit}&[hidden]{display:none}&:before{content:"";inset:0 var(--spacer-2);border-radius:var(--radius-medium);z-index:-1;display:block;position:absolute}&:checked:before,&:not(:checked):before{background-color:#0000}&:not(:disabled){&:hover,&:active,&:focus-visible{background-color:#0000;outline:0;&:before{background-color:var(--figma-color-bg-menu-hover)}}}}& optgroup{color:var(--figma-color-text-menu-secondary);text-align:left;padding:0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));font-weight:var(--body-medium-fontWeight);position:relative;&[label]:not([label=""]){padding-top:var(--spacer-2);& option:first-child{margin-top:var(--spacer-2)}}& legend{padding:var(--spacer-1,.3rem) var(--spacer-1,1rem)}& option{margin:0 calc(var(--spacer-1) * -1);margin-left:calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1)}&:not(:first-child):not(:first-of-type){margin-top:var(--spacer-2);padding-top:var(--spacer-3);&:before{content:"";background-color:var(--figma-color-border-menu);height:1px;margin-bottom:var(--spacer-2);display:block;position:absolute;top:1px;left:0;right:0}}}& option[hidden=true]:first-child+optgroup{padding-top:var(--spacer-2);margin-top:0;&:before{display:none}}&:has(>button){padding-left:0}&>button{align-items:center;gap:var(--spacer-1);width:100%;color:inherit;font:inherit;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:0;height:100%;margin:0;padding:0;display:flex;overflow:hidden;&>selectedcontent{align-items:center;gap:0;min-width:0;display:flex;&:not(:has(>svg)){padding-left:var(--spacer-2)}& svg{flex-shrink:0}}}}& ::picker-icon{display:none}& ::picker(select){appearance:base-select;color-scheme:dark;scrollbar-width:thin;scrollbar-color:var(--figma-color-text-menu-tertiary) var(--figma-color-bg-menu);border-radius:var(--radius-large);background-color:var(--figma-color-bg-menu);padding:var(--spacer-2) 0;box-shadow:var(--figma-elevation-400-menu-panel);border:0;outline:0}}}input[type=text][list],select{padding-right:var(--spacer-4);padding-left:var(--spacer-2)}fig-dropdown,.fig-dropdown{display:inline-flex;position:relative;&>:not(select){display:none!important}&>select{flex:1;align-items:center;width:100%;display:flex}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-chevron);background-color:var(--figma-color-icon);pointer-events:none;position:absolute;top:50%;right:.25rem;transform:translateY(-50%);mask-position:50%;mask-size:contain;mask-repeat:no-repeat}&[autoresize] select{field-sizing:content}}.fig-button,fig-button{color:var(--figma-color-text-onbrand);height:var(--spacer-4);padding:0 var(--spacer-2);appearance:none;border-radius:var(--radius-medium);background-color:var(--figma-color-bg-brand);border:0;outline:0;justify-content:center;align-items:center;min-width:0;font-weight:500;display:flex;&:active{background-color:var(--figma-color-bg-brand-pressed)}&:hover{background-color:var(--figma-color-bg-brand-hover);&:active{background-color:var(--figma-color-bg-brand-pressed);color:var(--figma-color-text-onbrand-secondary)}}&[variant=link]{box-shadow:none;color:var(--figma-color-text-brand);background:0 0;&:hover:not(:active){background-color:#0000}&:active{background-color:var(--figma-color-bg-selected);color:var(--figma-color-text-brand);outline:0}}&[variant=ghost]{box-shadow:none;color:var(--figma-color-text);background:0 0;&:hover:not(:active){background-color:var(--figma-color-bg-transparent-hover)}&:active{background-color:var(--figma-color-bg-transparent-pressed);color:var(--figma-color-text);outline:0}}&[variant=ghost][disabled]:not([disabled=false]){background-color:#0000}&[variant=secondary]{box-shadow:inset 0 0 0 1px var(--figma-color-border);padding:0 calc(var(--spacer-2) - 1px);color:var(--figma-color-text);background:0 0;&:active{background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}}&[variant=input]{background-color:var(--figma-color-bg-secondary);box-shadow:none;color:var(--figma-color-text);&:hover{box-shadow:inset 0 0 0 1px var(--figma-color-border);background-color:var(--figma-color-bg-transparent)}&:active{background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}&:focus-visible{background-color:var(--figma-color-bg-secondary)}}&[variant=overlay]{color-scheme:light;background-color:var(--figma-color-bg);color:var(--figma-color-text);box-shadow:0 0 0 1px var(--figma-color-bordertranslucent);&:active,&:has(:active){background-color:var(--figma-color-bg-secondary);color:var(--figma-color-text)}}&[icon]{width:var(--spacer-4);flex-grow:0;flex-shrink:0;flex-basis:var(--spacer-4);padding:0;&[size=compact]{width:var(--spacer-3);flex-basis:var(--spacer-3)}}&[disabled]:not([disabled=false]){background-color:var(--figma-color-bg-disabled);pointer-events:none;cursor:not-allowed;&:not([variant=secondary]){color:var(--figma-color-text-ondisabled);box-shadow:none}&[variant=secondary],&[variant=ghost]{color:var(--figma-color-text-disabled);background-color:#0000}}&[size=large],&[size=large]>button{height:var(--spacer-5);padding:0 var(--spacer-3)}&[size=large][icon],&[size=large][icon]>button{width:var(--spacer-5);flex-basis:var(--spacer-5);padding:0}&[full]{width:100%}&[inline=false],&[inline=false]>button{text-align:left;width:100%;height:auto;padding:var(--spacer-1) var(--spacer-2);justify-content:left;align-items:center;display:flex}&[type=select],&[type=upload]{position:relative;overflow:hidden;&>select,&>input,&>fig-dropdown{opacity:0;appearance:none;position:absolute;inset:0}}&[inline=false]{padding:0}&[selected]:not([selected=false]){&,&:hover{color:var(--figma-color-icon-brand);background-color:var(--figma-color-bg-selected)}}&:focus-visible,&[data-focus-visible]{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}& svg{& [fill]{fill:currentColor}& [stroke]:not([stroke=none]){stroke:currentColor}}&:has(svg:first-child):not([icon]){padding-left:var(--spacer-1)}}.fig-button-combo,fig-button-combo,.fig-input-combo,fig-input-combo{flex-wrap:nowrap;align-items:center;gap:0;display:inline-flex;&>*{&:first-child,&:first-child>*{border-top-right-radius:0;border-bottom-right-radius:0}&:last-child,&:last-child>*{border-top-left-radius:0;border-bottom-left-radius:0}&:not(:last-child):not(:first-child),&:not(:last-child):not(:first-child)>*{border-radius:0}}}.fig-input-combo,fig-input-combo{gap:1px}.fig-button-combo,fig-button-combo{&>:not([variant=secondary]):not(:first-child){box-shadow:inset 1px 0 0 0 var(--figma-color-bg-brand-hover);&[disabled]:not([disabled=false]){box-shadow:inset 1px 0 0 0 var(--figma-color-border-disabled)}}&>[variant=secondary]:not(:first-child){border-left-width:0!important;&[disabled]:not([disabled=false]){border-left-width:0!important}}}fig-tab,.fig-tab{height:1.5rem;padding:0 var(--spacer-2);appearance:none;cursor:default;user-select:none;border-radius:var(--radius-medium);color:var(--figma-color-text-secondary);border:0;flex-direction:column;justify-content:center;align-items:center;display:inline-flex;position:relative;gap:0!important;&[label]{&:after{content:attr(label);color:var(--figma-color-text-secondary);visibility:hidden;user-select:none;pointer-events:none;font-weight:var(--body-medium-strong-fontWeight);overflow:hidden;width:auto!important;height:0!important}}&:has(:checked),&[selected]:not([selected=false]){background-color:var(--figma-color-bg-secondary);font-weight:var(--body-medium-strong-fontWeight);color:var(--figma-color-text)}&:hover{background-color:var(--figma-color-bg-secondary)}& [type=radio]{opacity:0;z-index:1;border-radius:0;width:100%;height:100%;position:absolute;inset:0}}fig-tabs,.tabs{gap:var(--spacer-2);display:flex}fig-tab-content,.fig-tab-content{display:none}fig-avatar,.fig-avatar{contain:layout paint;--size:1.5rem;width:var(--size);height:var(--size);background:var(--figma-color-bg-brand);color:var(--figma-color-icon-onbrand);border:0;border-radius:100%;place-items:center;display:inline-grid;overflow:hidden;& img{width:var(--size);height:var(--size);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border-radius:100%;position:absolute;&:not([src]){background:var(--checkerboard)}}&[borderless] img{box-shadow:none}&:has(img[src]){background:0 0}&:after{content:attr(initials)}&[size=large]{--size:3rem}}input[type=color]{-webkit-appearance:none;appearance:none;box-sizing:content-box;border-radius:var(--radius-medium);background:0 0;background-color:var(--figma-color-bg-secondary);border:0;flex-shrink:0;width:.875rem;height:.875rem;margin:0;padding:.3125rem;display:inline-grid;&:focus{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&::-webkit-color-swatch-wrapper{color-scheme:inherit;appearance:none;background:var(--checkerboard);color-scheme:inherit;border:0;border-radius:.125rem;outline:0;grid-area:1/1;padding:0;overflow:hidden}&::-webkit-color-swatch{color-scheme:inherit;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);color-scheme:inherit;mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);border:0;border-radius:.125rem;padding:0}}input[type=color]{&::-moz-color-swatch{color-scheme:inherit;appearance:none;mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border:0;border-radius:.125rem;padding:0}}fig-chit{--size:1.5rem;--padding:5px;--width:var(--size);--height:var(--size);--border-radius:var(--radius-medium);--chit-background:#d9d9d9;--chit-bg-size:cover;--chit-bg-position:center;--selected:0;--alpha:1;width:var(--size);height:var(--size);border-radius:var(--border-radius);background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 calc(var(--selected) * 1px) var(--figma-color-border-selected);display:inline-grid;&:before,&:after,& input{grid-area:1/1}&[selected]:not([selected=false]){--selected:1;background-color:#0000}&[size=medium],&[size=large]{--padding:0px;&[selected]:not([selected=false]){--padding:3px}}&[size=medium]{--size:1.5rem;--padding:0px}&[size=large]{--size:2rem;--padding:0px}&[disabled]:not([disabled=false]){pointer-events:none}&:before,&:after{content:"";width:calc(var(--width) - var(--padding) * 2);height:calc(var(--height) - var(--padding) * 2);border-radius:calc(var(--border-radius) - (var(--padding) / 2));pointer-events:none;grid-area:1/1;place-self:center}&:after{box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);z-index:1}&:before{content:"";background:var(--chit-background);background-size:var(--chit-bg-size);background-position:var(--chit-bg-position);border-radius:calc(var(--border-radius) - (var(--padding) / 2));mask-image:linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);background-repeat:no-repeat;grid-area:1/1;place-self:center}&[size=medium]:before,&[size=large]:before{border-radius:calc(var(--border-radius) - var(--padding))}& input[type=color]{width:var(--width);height:var(--height);box-sizing:border-box;opacity:0;background:0 0;grid-area:1/1;place-self:center}&[data-type=gradient],&[data-type=image]{background-color:var(--figma-color-bg-secondary);& input[type=color]{display:none}}&[data-type=image]:not([background]):after,&[data-type=image][background=""]:after,&[data-type=image][background="url()"]:after,&[checkerboard]:not([checkerboard=false]):after{background:var(--checkerboard)}}fig-image{--image-size:2rem;--fit:cover;--image-width:var(--image-size);--image-height:var(--image-size);--aspect-ratio:1 / 1;width:var(--image-width);height:var(--image-height);aspect-ratio:var(--aspect-ratio);place-items:center;display:inline-grid;&>*{grid-area:1/1}& fig-chit[size=large]{--padding:0px;--chit-bg-size:var(--fit);--size:100%!important;--width:100%!important;--height:100%!important;&[disabled]{opacity:1}}&:not([src]):not([src=""]) fig-button,&:hover fig-button{opacity:1;pointer-events:all}&[size=medium]{--image-size:4rem}&[size=large]{--image-size:8rem}&[size=auto]{--image-size:6rem;&[full]:not([full=false]){--image-width:100%}}&[aspect-ratio]{height:auto;& fig-chit{--size:100%!important;height:auto!important;aspect-ratio:var(--aspect-ratio)!important}}&>div{gap:var(--spacer-2);opacity:0;pointer-events:none;display:flex}&:not([src]):not([src=""])>div,&:hover>div{opacity:1;pointer-events:all}& fig-button[type=download]{display:none}&[src]:not([src=""]){& fig-button[type=download]{display:inline-flex}}}fig-easing-curve{gap:var(--spacer-2);--stroke-width:1;--easing-bezier-handle-radius:5;--easing-spring-handle-radius:5;--easing-handle-fill:var(--figma-color-border-strong);--easing-duration-bar-width:7;--easing-duration-bar-height:16;--easing-duration-bar-radius:4;--aspect-ratio:1 / 1;flex-direction:column;width:100%;display:flex;& .fig-easing-curve-svg{width:100%;aspect-ratio:var(--aspect-ratio);overflow:visible}& .fig-easing-curve-svg-container{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);padding:var(--spacer-3);overflow:hidden;&:is(:hover,:active,:focus,:focus-visible,:focus-within){overflow:visible}}&.spring-mode{& .fig-easing-curve-svg-container,& .fig-easing-curve-svg{cursor:ew-resize}}& .fig-easing-curve-diagonal,& .fig-easing-curve-bounds,& .fig-easing-curve-arm,& .fig-easing-curve-path,& .fig-easing-curve-target{pointer-events:none}& .fig-easing-curve-diagonal{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-bounds{fill:#0000}& .fig-easing-curve-arm{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-path{fill:none;stroke:var(--figma-color-text);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-target{stroke:var(--figma-color-bordertranslucent);stroke-width:var(--stroke-width);stroke-linejoin:round;stroke-linecap:round}& .fig-easing-curve-handle{pointer-events:all;cursor:default;overflow:visible}& .fig-easing-curve-endpoint{fill:var(--easing-handle-fill)}& .fig-easing-curve-duration-bar fig-handle{--border-radius:calc(var(--easing-duration-bar-radius) * 1px);--width:calc(var(--easing-duration-bar-width) * 1px);--height:calc(var(--easing-duration-bar-height) * 1px)}& .fig-easing-curve-dropdown{& option svg{vertical-align:middle}}}fig-3d-rotate{gap:var(--spacer-2);--aspect-ratio:1 / 1;--perspective:20rem;--perspective-origin:50% 50%;--transform-origin:50% 50% -50cqi;--gradient-start-color:light-dark(#0000000d,#ffffff0d);--border-width:1px;--border-start-color:light-dark(#0000001a,#ffffff1a);--border-end-color:transparent;--gradient-end-color:transparent;--figma-3d-rotate-handle-size:6px;--front-face-bg:light-dark(var(--figma-color-bg),#555);flex-wrap:wrap;width:100%;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0}&>fig-input-number{flex:1 0 3rem}& .fig-3d-rotate-container{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);width:100%;aspect-ratio:var(--aspect-ratio);cursor:grab;user-select:none;flex:100%;justify-content:center;align-items:center;padding:0 2.5rem;display:flex;overflow:hidden;&.dragging,&:active{cursor:grabbing}&:focus{outline:0}}& .fig-3d-rotate-scene{aspect-ratio:1;width:100%;max-width:max(3.5rem,50%);max-height:max(3.5rem,50%);perspective:var(--perspective,20rem);perspective-origin:var(--perspective-origin,50% 50%);container-type:inline-size}& .fig-3d-rotate-cube{aspect-ratio:1;width:100%;height:100%;transform-style:preserve-3d;transform-origin:var(--transform-origin,50% 50% -50cqi);position:relative}& .fig-3d-rotate-face{backface-visibility:visible;background:linear-gradient(to bottom, var(--gradient-start-color), var(--gradient-end-color));position:absolute;inset:0;&.selected{border-radius:var(--radius-medium);box-shadow:var(--elevation-100-canvas);inset:-1px;background:var(--figma-color-border-strong)!important}&.front{background:var(--front-face-bg);border-radius:var(--radius-medium);transform-style:preserve-3d;box-shadow:var(--elevation-100-canvas);inset:-1px;&:after{content:"";width:var(--figma-3d-rotate-handle-size);height:var(--figma-3d-rotate-handle-size);background:var(--figma-color-border-strong);backface-visibility:hidden;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}&.back{transform-origin:100%;background:linear-gradient(to bottom, var(--border-start-color), var(--border-end-color));border-radius:var(--radius-medium);transform:translate(-100%)rotateY(-.25turn)translate(-100%)rotateY(-.25turn)}&.right{transform-origin:0%;background:linear-gradient(to right, var(--gradient-start-color), var(--gradient-end-color));border-width:var(--border-width) 0;border-style:solid;border-image:linear-gradient(to right, var(--border-start-color), var(--border-end-color)) 1;transform:translate(100%)rotateY(.25turn)}&.left{transform-origin:100%;background:linear-gradient(to left, var(--gradient-start-color), var(--gradient-end-color));border-width:var(--border-width) 0;border-style:solid;border-image:linear-gradient(to left, var(--border-start-color), var(--border-end-color)) 1;transform:translate(-100%)rotateY(-.25turn)}&.top{transform-origin:50% 100%;background:linear-gradient(to top, var(--gradient-start-color), var(--gradient-end-color));border-width:0 var(--border-width);border-style:solid;border-image:linear-gradient(to top, var(--border-start-color), var(--border-end-color)) 1;transform:rotateX(.25turn)}&.bottom{transform-origin:50% 0;background:linear-gradient(to bottom, var(--gradient-start-color), var(--gradient-end-color));border-width:0 var(--border-width);border-style:solid;border-image:linear-gradient(to bottom, var(--border-start-color), var(--border-end-color)) 1;top:100%;bottom:auto;transform:rotateX(-.25turn)}}}fig-origin-grid{gap:var(--spacer-2);--aspect-ratio:1 / 1;--origin-grid-dot-size:.125rem;--origin-grid-handle-size:.75rem;--origin-grid-height:var(--spacer-4);flex-direction:column;width:100%;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0}& .fig-origin-grid-surface{width:100%;aspect-ratio:var(--aspect-ratio);min-height:calc(var(--origin-grid-height) * 3)}& .origin-grid{border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);user-select:none;cursor:default;width:100%;height:100%;position:relative;container-type:size;&.is-dragging{cursor:grabbing!important;& fig-handle{cursor:grabbing!important}}&.drag-disabled{& fig-handle{cursor:default}}}& .origin-grid-cells{grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:0}& .origin-grid-cell{width:100%;height:100%;min-height:var(--origin-grid-height);color:var(--figma-color-icon-tertiary);pointer-events:none;place-items:center;display:grid;& .origin-grid-dot{width:var(--origin-grid-dot-size);height:var(--origin-grid-dot-size);border-radius:var(--radius-small);background:currentColor}&.is-hovered{color:var(--figma-color-bg-brand-secondary);& .origin-grid-dot{width:var(--origin-grid-handle-size);height:var(--origin-grid-handle-size)}}}& fig-handle{--origin-overflow-rotation:0deg;--origin-overflow-nudge-base:var(--spacer-2-5);--origin-overflow-nudge-x:0px;--origin-overflow-nudge-y:0px;--origin-overflow-nudge-x-scale:calc((100cqb / 100cqi) * -1);--origin-overflow-nudge-y-scale:calc((100cqb / 100cqi) * -1);--width:var(--origin-grid-handle-size);--height:var(--origin-grid-handle-size);--border-radius:var(--radius-small);transform:translate(calc(-50% + var(--origin-overflow-nudge-x)), calc(-50% + var(--origin-overflow-nudge-y))) rotate(var(--origin-overflow-rotation));cursor:default;touch-action:none;position:absolute;top:50%;left:50%;&.beyond-bounds-x,&.beyond-bounds-y{-webkit-mask-image:var(--icon-arrow-left);mask-image:var(--icon-arrow-left);--border-radius:0;--box-shadow:none;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:24px 24px;mask-size:24px 24px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}&.beyond-bounds-x.overflow-right{--origin-overflow-rotation:180deg}&.beyond-bounds-y:not(.beyond-bounds-x){--origin-overflow-rotation:90deg}&.beyond-bounds-y.overflow-down:not(.beyond-bounds-x){--origin-overflow-rotation:-90deg}&.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-up{--origin-overflow-rotation:45deg}&.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-down{--origin-overflow-rotation:-45deg}&.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-up{--origin-overflow-rotation:135deg}&.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-down{--origin-overflow-rotation:-135deg}&.overflow-left{--origin-overflow-nudge-x:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale))}&.overflow-right{--origin-overflow-nudge-x:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale) * -1)}&.overflow-up{--origin-overflow-nudge-y:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale))}&.overflow-down{--origin-overflow-nudge-y:calc(var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale) * -1)}}& .origin-values{gap:var(--spacer-2);grid-template-columns:1fr 1fr;display:grid}}.input-combo{flex-wrap:nowrap;align-items:center;gap:1px;display:inline-flex;&>label{color:var(--figma-color-text);align-self:stretch}&>*{&:first-child:not(:last-child),&:first-child:not(:last-child)>*{border-top-right-radius:0;border-bottom-right-radius:0}&:last-child:not(:first-child),&:last-child:not(:first-child)>*{border-top-left-radius:0;border-bottom-left-radius:0}&:not(:last-child):not(:first-child),&:not(:last-child):not(:first-child)>*{border-radius:0}}}.fig-input-fill-label{padding:0 var(--spacer-2) 0 var(--spacer-1);height:var(--control-height);font-size:var(--font-size-small);color:var(--figma-color-text-secondary);background:var(--figma-color-bg-secondary);user-select:none;flex:1;align-items:center;min-width:0;margin-left:-1px;display:inline-flex}input[type=checkbox].switch{contain:strict;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;background-color:var(--figma-color-bg-switch);width:2rem;height:1rem;transition:var(--input-transition);box-sizing:border-box;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);border:0;border-radius:.5rem;outline:none;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex;top:0;left:0}input[type=checkbox].switch:after{content:"";background-color:var(--handle-color);width:calc(1rem - 2px);height:calc(1rem - 2px);transition:var(--input-transition);box-shadow:var(--handle-shadow);border-radius:.5rem;margin:1px;transform:translate(-.5rem)}input[type=checkbox].switch[indeterminate=true]:after{width:.5rem;height:.125rem;transform:none}input[type=checkbox].switch[indeterminate=true],input[type=checkbox].switch:checked{background-color:var(--figma-color-bg-brand)}input[type=checkbox].switch:checked:after{transform:translate(.5rem)}input[type=checkbox].switch:disabled{background-color:var(--figma-color-bg-secondary);cursor:not-allowed;&:after{background-color:var(--figma-color-bg)}}input[type=checkbox].switch:focus,input[type=checkbox].switch:checked:focus{outline:0}input[type=checkbox]:not(.switch){contain:strict;--size:1rem;appearance:none;border-radius:var(--radius-medium);width:var(--size);height:var(--size);aspect-ratio:1;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-secondary);vertical-align:middle;&:after{content:"";width:var(--size);height:var(--size);mask-image:var(--icon-checkmark);background-color:#0000}&:hover:not(:checked):not(:disabled){&:after{opacity:.25;background-color:var(--figma-color-icon)}}&:checked{background-color:var(--figma-color-bg-brand);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected-strong);&:after{background-color:var(--figma-color-icon-onbrand)}}&:focus{outline:0;&:not(:checked){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}}}@media (prefers-color-scheme:light){:root:not(.figma-dark):not(.figma-light) input[type=checkbox]:not(.switch):not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A")}}:root.figma-light input[type=checkbox]:not(.switch):not(:disabled):hover{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A")}label.checkbox:has([type=checkbox]){padding-left:1.5rem;& [type=radio]{margin-left:-1.5rem}}input[type=radio]{contain:strict;appearance:none;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);background-color:var(--figma-color-bg-secondary);vertical-align:middle;border-radius:.5rem;place-content:center;margin:0;display:inline-grid;&:checked{background-color:var(--figma-color-bg-brand);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected-strong);&:after{transform:scale(1)}}&:focus{outline:0;&:not(:checked){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}}&:hover:not(:checked):not(:disabled){&:after{opacity:.25;background-color:var(--figma-color-icon);transform:scale(1)}}&:after{content:"";background-color:var(--figma-color-icon-onbrand);border-radius:100%;width:.375rem;height:.375rem;transform:scale(0);box-shadow:0 0 0 .75px #0000001a,0 1px 3px #0000001a,0 3px 8px #0000001a,0 0 .5px #0000002e}}label.radio:has([type=radio]){padding-left:1.5rem;& [type=radio]{margin-left:-1.5rem}}fieldset{padding:var(--spacer-2) 0;border:0;flex-direction:column;align-items:start;gap:.25rem;display:flex;&>legend{color:var(--figma-color-text-secondary);margin-top:.125rem;font-size:.625rem;font-weight:500;line-height:.875rem}&>label{column-gap:var(--spacer-2);grid-template-columns:4rem 1fr;align-items:center;width:100%;display:grid}}details{&>summary{font-weight:var(--body-medium-strong-fontWeight);cursor:default;height:var(--spacer-5);user-select:none;color:var(--figma-color-text-secondary);align-items:center;padding:0 1rem 0 0;display:flex;&:before{content:"";mask-image:var(--icon-chevron);background:var(--figma-color-text-secondary);width:1rem;height:1rem;transition:transform var(--transition-duration) var(--transition-timing-function);justify-content:center;align-items:start;display:inline-flex;transform:rotate(-90deg)}&::-webkit-details-marker{display:none}&::marker{content:""}}&>summary:hover,&[open]>summary{color:inherit;&:before{opacity:1}}&[open]{&>summary:before{transform:rotate(0)}}}.fig-slider,fig-slider{--slider-field-height:1.5rem;--slider-height:1rem;--slider-thumb-size:var(--slider-height);--slider-thumb-width:var(--slider-thumb-size);--slider-thumb-height:var(--slider-thumb-size);--slider-thumb-color:var(--handle-color);--slider-thumb-radius:calc(var(--slider-thumb-width) / 2);--slider-thumb-opacity:1;--slider-thumb-outline:none;--slider-thumb-outline-offset:2px;--slider-tick-opacity:1;--slider-tick-radius:100%;--slider-border-radius:calc(var(--slider-height) / 2);--slider-stepper-padding:calc((var(--slider-height) / 2) - var(--slider-tick-width) / 2);--slider-percent:calc(var(--slider-complete) * 100%);--start-percent:calc(var(--default,0) * 100%);--slider-tick-width:calc(var(--slider-height) / 4);--slider-tick-height:calc(var(--slider-height) / 4);--slider-handle-shadow:inset 0 0 0 calc(4px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0px 0 0 .5px #0000001a, var(--figma-elevation-100);--slider-handle-shadow-focus:inset 0 0 0 4px var(--slider-thumb-color), inset 0 0 0 5px #0000001a, var(--handle-shadow), 0 0 0 1px var(--figma-color-border-selected);--slider-transition:none;--handle-transition:var(--slider-transition);height:var(--slider-field-height);transition:var(--slider-transition);align-items:center;display:inline-flex;position:relative;& .fig-slider-input-container{height:var(--slider-height);width:100%;transition:var(--slider-transition);background:var(--figma-color-bg-secondary);border-radius:var(--slider-border-radius);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);display:block;position:relative;&:before{content:"";background:var(--figma-color-bg-brand);pointer-events:none;border-radius:var(--slider-border-radius);min-width:var(--slider-height);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);width:calc(var(--slider-percent) + (1 - var(--slider-complete)) * var(--slider-height));max-width:100%;position:absolute;top:0;bottom:0;left:0}}&[type=stepper]{& .fig-slider-input-container{&:before{display:none}}}&[type=delta]{& datalist option{left:calc(var(--start-percent) - var(--slider-tick-width) / 2);top:calc(50% - var(--slider-tick-height) / 2);margin:0;position:absolute}& .fig-slider-input-container{&:before{--left-start:calc(var(--start-percent) - var(--slider-height) / 2);left:min(var(--left-start), var(--slider-percent) - (var(--slider-complete)) * var(--slider-height));--width:calc(var(--slider-percent) - var(--start-percent));--abs-width:max(var(--width) + var(--slider-height) / 2 + (1 - var(--slider-complete)) * var(--slider-height), -1 * var(--width) + var(--slider-height) / 2 + (var(--slider-complete)) * var(--slider-height));width:var(--abs-width);--delta:calc(var(--slider-complete) - var(--default));--abs-delta:max(var(--delta), -1 * var(--delta));opacity:calc(var(--abs-delta) * 100)}}}&[type=hue],&[type=opacity]{& .fig-slider-input-container{&:before{display:none}}}& input[type=range]{height:var(--slider-height);-webkit-appearance:none;appearance:none;border-radius:var(--slider-border-radius);width:100%;transition:var(--slider-transition);background-color:#0000;display:block;position:relative;&:active::-webkit-slider-thumb{cursor:grabbing;cursor:-webkit-grabbing}&:focus{outline:none}&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;color-scheme:inherit;transition:var(--handle-transition);border-radius:var(--slider-thumb-radius);height:var(--slider-thumb-height);width:var(--slider-thumb-width);margin-top:calc(var(--slider-height) / 2 - var(--slider-thumb-height) / 2);outline:var(--slider-thumb-outline);outline-offset:var(--slider-thumb-outline-offset);aspect-ratio:1;z-index:1;cursor:default;box-shadow:var(--slider-handle-shadow);opacity:var(--slider-thumb-opacity);background:0 0;border:none;position:relative}&:disabled{cursor:not-allowed;&::-webkit-slider-runnable-track{color-scheme:inherit;background:linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent))}&::-webkit-slider-thumb{box-shadow:inset 0 0 0 1rem var(--figma-color-bg-disabled)}}&::-webkit-slider-runnable-track{color-scheme:inherit;height:var(--slider-height);transition:var(--slider-transition);border-radius:var(--slider-border-radius);background-color:#0000}&.hue::-webkit-slider-runnable-track{background:var(--bg-hue)}&.opacity::-webkit-slider-runnable-track{background:linear-gradient(to right, transparent, var(--color)), var(--checkerboard)}}& input[type=range]{height:var(--slider-height);-moz-appearance:none;appearance:none;border-radius:var(--slider-border-radius);width:100%;transition:var(--slider-transition);background-color:#0000;display:block;position:relative;&:focus{outline:none}&:active::-moz-range-thumb{cursor:grabbing;cursor:-webkit-grabbing}&::-moz-range-thumb{color-scheme:inherit;-moz-appearance:none;appearance:none;border-radius:var(--slider-thumb-radius);height:var(--slider-thumb-height);width:var(--slider-thumb-width);outline:var(--slider-thumb-outline);outline-offset:var(--slider-thumb-outline-offset);aspect-ratio:1;z-index:1;cursor:default;box-shadow:var(--slider-handle-shadow);transition:var(--handle-transition);opacity:var(--slider-thumb-opacity);background:0 0;border:none;position:relative}&:disabled{cursor:not-allowed;&::-moz-range-track{color-scheme:inherit;background:linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent))}&::-moz-range-thumb{box-shadow:inset 0 0 0 1rem var(--figma-color-bg-disabled)}}&::-moz-range-track{height:var(--slider-height);border-radius:var(--slider-border-radius);transition:var(--slider-transition);background-color:#0000}&.hue::-moz-range-track{background:var(--bg-hue)}&.opacity::-moz-range-track{background:linear-gradient(to right, transparent, var(--color)), var(--checkerboard)}}& datalist{transition:var(--slider-transition);appearance:none;padding:0 var(--slider-stepper-padding);height:var(--slider-height);pointer-events:none;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;margin:0;display:flex;position:absolute;inset:0;& option{appearance:none;width:var(--slider-tick-width);height:var(--slider-tick-height);border-radius:var(--slider-tick-radius);background:var(--figma-color-icon-tertiary);opacity:var(--slider-tick-opacity);border:0;padding:0;font-size:0;display:block;&[default]{background:var(--figma-color-icon)}&:first-child:last-child{margin:0 auto}}}&[variant=minimal]{--slider-height:.375rem;--slider-thumb-size:.75rem;--slider-tick-width:calc(var(--slider-height) / 2);--slider-tick-height:calc(var(--slider-height) / 2);--handle-transition:none;--slider-transition:none;--slider-handle-shadow:inset 0 0 0 calc(6px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0 0 0 .75px #00000013, inset 0 0 0 5px #0000001a, var(--figma-elevation-100);& .fig-slider-input-container{height:var(--slider-height);width:100%;display:block;position:relative}& fig-input-text{height:calc(var(--slider-height) * 2);background-color:#0000}&:hover,&:focus-within{& fig-input-text{height:auto}}}&[variant=neue]{--slider-height:.375rem;--slider-thumb-size:.75rem;--slider-tick-width:calc(var(--slider-height) / 2);--slider-tick-height:calc(var(--slider-height) / 2);--handle-transition:none;--slider-transition:none;--slider-handle-shadow:inset 0 0 0 calc(6px + .5rem * var(--unchanged)) var(--slider-thumb-color), 0 0 0 .75px #00000013, inset 0 0 0 5px #0000001a, var(--figma-elevation-100);background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);padding-left:var(--spacer-2);&:not([text=true]){padding-right:var(--spacer-2)}& .fig-slider-input-container{height:var(--slider-height);width:100%;box-shadow:none;background-color:var(--figma-color-bg-tertiary);display:block;position:relative}& fig-input-text,& fig-input-number{border-left:1px solid var(--figma-color-bg);border-top-left-radius:0;border-bottom-left-radius:0;flex-basis:5rem}&:hover,&:focus-within{& fig-input-text,& fig-input-number{height:auto}}}}.dialog,dialog,.popover,[popover]{contain:layout;color:var(--figma-color-text);border-radius:var(--radius-large,.8125rem);background:var(--figma-color-bg);min-width:var(--popover-min-width);box-shadow:var(--figma-elevation-500-modal-window);border:0;outline:0;padding:0;inset:auto;& footer{padding:var(--spacer-2);justify-content:flex-end;gap:var(--spacer-2);display:flex}& p{padding:0 var(--spacer-3)}&:popover-open{display:block;outline:none!important}& header{height:var(--spacer-6);padding:var(--spacer-2);font-weight:var(--body-medium-strong-fontWeight);box-shadow:inset 0 -1px 0 0 var(--figma-color-border);align-items:center;margin:0;display:flex;& h3{font:inherit}&>:first-child{padding-left:var(--spacer-2)}}&[tooltip]{color:var(--color-tooltip);background-color:var(--bg-tooltip);padding:var(--spacer-1) var(--spacer-2);box-sizing:content-box;min-width:var(--popover-min-width);max-width:var(--popover-min-width);top:anchor(top);left:anchor(center);white-space:nowrap;text-overflow:ellipsis;border-radius:var(--radius-medium,.3125rem);overflow:hidden;box-shadow:0 0 .5px #00000026,0 5px 12px #00000021,0 1px 3px #0000001a;line-height:1rem!important;@supports (-webkit-line-clamp:2){white-space:initial;-webkit-line-clamp:2;-webkit-box-orient:vertical}&:popover-open{display:inline-block;@supports (-webkit-line-clamp:2){display:-webkit-box}min-width:0}}}dialog[is=fig-dialog]{--z-index:999999;z-index:var(--z-index)}dialog[is=fig-popup]{contain:layout;--z-index:999999;--beak-offset:1px;z-index:var(--z-index);min-width:0;margin:0;padding:0;position:fixed;overflow:auto;&[autoresize]:not([autoresize=false]){width:max-content;max-width:calc(100vw - var(--spacer-4));max-height:calc(100vh - var(--spacer-4))}&[open]{display:block}&[theme=dark]{color-scheme:dark}&[theme=light]{color-scheme:light}&[theme=menu]{background-color:var(--figma-color-bg-menu);color:var(--figma-color-text-menu);color-scheme:dark}&[variant=popover]{filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);overflow:visible;box-shadow:inset 0 .5px #ffffff1a;&:after{content:"";background-color:inherit;clip-path:path("M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z");z-index:2;pointer-events:none;width:1rem;height:6px;position:absolute}&[data-beak-side=bottom]:after{top:calc(100% - 1px);left:var(--beak-offset,50%);transform:translate(-50%)}&[data-beak-side=top]:after{top:1px;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}&[data-beak-side=left]:after{left:6px;top:var(--beak-offset,50%);transform:translate(-100%,-50%)rotate(90deg)}&[data-beak-side=right]:after{left:calc(100% - 6px);top:var(--beak-offset,50%);transform:translateY(-50%)rotate(-90deg)}}}dialog[is=fig-toast]{contain:layout paint;--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);min-width:0;height:2.5rem;color:var(--figma-color-text);background-color:var(--figma-color-bg);justify-content:center;&[open]{display:flex}& p{color:inherit;font-weight:var(--body-medium-strong-fontWeight);margin:0;padding:0}& hr[vertical]{margin:0}& fig-button:last-child{margin-right:calc(var(--spacer-2) * -1)}&[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-tooltip{display:contents}.fig-tooltip{contain:layout;inset:unset;color:var(--color-tooltip);background-color:var(--bg-tooltip);padding:var(--spacer-1) var(--spacer-2);font-weight:inherit;border-radius:var(--radius-medium,.3125rem);filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);width:max-content;max-width:180px;display:inline-block;overflow:visible;box-shadow:inset 0 .5px #ffffff1a;line-height:1rem!important;&>span{text-wrap:balance;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;width:auto;max-height:2.5rem;display:-webkit-box;overflow-y:hidden}&:after{content:"";background-color:inherit;clip-path:var(--tip-pointer);width:6px;height:3px;top:100%;left:var(--beak-offset,50%);z-index:2;position:absolute;transform:translate(-50%)}&[position=bottom]{&:after{top:0;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}}}fig-icon{display:block}fig-icon.close{contain:strict;background-color:var(--figma-color-text);width:1rem;height:1rem;clip-path:path("M11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645Z")}fig-button,fig-content,fig-slider,fig-switch,fig-input-color,fig-input-gradient,fig-input-fill,fig-checkbox,fig-radio,fig-tab,fig-tabs,fig-segmented-control,fig-input-palette{gap:var(--spacer-2);user-select:none;display:inline-flex;&[full]:not([full=false]){width:100%;display:flex}}fig-dropdown{&[full]:not([full=false]){width:100%;display:flex}}fig-checkbox,fig-radio{align-items:center;padding-top:.25rem;padding-bottom:.25rem;& label span{vertical-align:middle}}fig-switch{align-items:center;padding-top:.25rem;padding-bottom:.25rem}fig-input-color{--alpha:1}fig-header{height:var(--spacer-6);padding:var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);box-shadow:inset 0 -1px 0 0 var(--figma-color-border);align-items:center;gap:.25rem;margin:0;display:flex;& h3{font-weight:var(--body-medium-strong-fontWeight);flex-grow:1}&[borderless]{box-shadow:none}}fig-footer{justify-content:flex-end;align-items:center;gap:var(--spacer-2);height:var(--spacer-6);padding:var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);box-shadow:inset 0 1px 0 0 var(--figma-color-border);display:flex;& h3{font-weight:var(--body-medium-strong-fontWeight);align-items:baseline;gap:var(--spacer-half);flex-grow:1;display:flex}&[borderless]{box-shadow:none}&[sticky]:not([sticky=false]){z-index:10;background:var(--figma-color-bg);margin-top:auto;position:sticky;bottom:0}}fig-content{padding:var(--spacer-2) 0;display:block}vstack,.vstack,[vstack]{align-items:start;gap:var(--spacer-2);flex-flow:column wrap;display:flex}hstack,.hstack,[hstack]{gap:var(--spacer-2);flex-wrap:nowrap;align-items:start;display:flex}fig-input-text,fig-input-number{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);user-select:all;min-width:0;color:var(--figma-color-text);border:0;flex-wrap:nowrap;flex:1;justify-content:center;gap:0;display:inline-flex;&[full]:not([full=false]),&[multiline]{width:100%;display:flex}&[autoresize] input,&[autoresize] textarea{field-sizing:content}&[resizable] input,&[resizable] textarea{resize:both}&[resizable]:has(textarea[style*=width]),&[resizable]:has(textarea[style*=height]),&[resizable]:has(input[style*=width]),&[resizable]:has(input[style*=height]){flex:unset}& label,& [slot]{flex-wrap:nowrap;justify-content:center;align-items:center;width:100%;display:flex}& [slot]{user-select:none;width:1.5rem;color:var(--figma-color-text-secondary)}& [slot=prepend]{margin-right:calc(var(--spacer-2) * -1);padding-right:0}& [slot=append]{margin-left:calc(var(--spacer-2) * -1);padding-left:0}& input{flex:1;background-color:#0000!important;&:focus,&:active{box-shadow:none!important}}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}&:hover{box-shadow:inset 0 0 0 1px var(--figma-color-border)}&[disabled]:not([disabled=false]){background-color:var(--figma-color-bg);pointer-events:none;cursor:not-allowed;color:var(--figma-color-text-disabled);box-shadow:inset 0 0 0 1px var(--figma-color-border-disabled);& [slot]{color:var(--figma-color-text-disabled)}}}fig-input-number>[slot],fig-input-text[type=number]>[slot]{cursor:ew-resize!important}fig-input-color,fig-input-gradient,fig-input-fill{background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);box-shadow:none!important;&:focus,&:focus-within,&.has-popup-open{outline:1px solid var(--figma-color-border-selected)!important;outline-offset:-1px!important}&:hover{outline:1px solid var(--figma-color-border);outline-offset:-1px!important}&>.input-combo>fig-chit:not(:only-child),&>.input-combo>fig-chit:not(:only-child) input,&>.input-combo>fig-fill-picker:not(:only-child),&>.input-combo>fig-fill-picker:not(:only-child)>fig-chit>input,&>.input-combo>label,& fig-fill-picker:not(:only-child),& fig-input-text,& fig-chit{&,&:focus,&:hover{--selected:0;box-shadow:none!important;background-color:#0000!important;border:0!important}}& fig-chit~fig-input-text>input,& fig-chit~label,& fig-fill-picker~fig-input-text>input,& fig-fill-picker~label{padding-left:0!important}&>.input-combo{flex:1;min-width:0}& fig-input-number{flex:0 3rem;box-shadow:inset 1px 0 0 0 var(--figma-color-bg)!important;background-color:#0000!important}&[disabled]:not([disabled=false]){& .input-combo{gap:0}}fig-field[direction=horizontal] &{flex:1;min-width:0}}fig-input-gradient{--height:1.5rem;height:var(--height);width:100%;min-width:0;position:relative;&:focus,&:active,&:focus-within{outline:1px solid var(--figma-color-border-selected)!important;outline-offset:-1px!important}&>fig-chit{--padding:0;--width:100%;flex:auto;width:100%!important;min-width:0!important}& .fig-input-gradient-track{pointer-events:auto;z-index:1;align-items:center;display:flex;position:absolute;inset:0;& fig-handle{pointer-events:auto;cursor:default;&:hover{z-index:5}}}}fig-input-palette{gap:var(--spacer-2);flex-direction:column;min-width:0;display:inline-flex!important;& .palette-colors{border-radius:var(--radius-medium);flex-wrap:nowrap;grid-area:inputs;gap:0;width:100%;min-width:0;display:flex;overflow:hidden}& .palette-add-btn{grid-area:button}& .palette-colors-inline{border-radius:var(--radius-medium);background-color:var(--figma-color-bg-secondary);grid-template-columns:1fr 24px;grid-template-areas:"inputs button";width:100%;display:inline-grid!important;& .palette-colors{background-color:var(--figma-color-bg-secondary);display:flex;& fig-input-color{width:100%}& fig-chit{--padding:0px;--border-radius:0px;--width:100%;min-width:0;height:var(--size);flex:1;border-radius:0!important;width:100%!important;& input,&:before,&:after{border-radius:0!important;padding:0!important}}}}&[expanded]:not([expanded=false]):not([edit=false]){& .palette-colors-expanded{display:flex}}&[add=false]{& .palette-colors-expanded,& .palette-colors-inline{grid-template-areas:"inputs inputs"}}& .palette-colors-expanded{gap:var(--spacer-2);border-radius:0;flex-direction:column;width:100%;display:none;overflow:visible;&>fig-input-color{min-width:0}& fig-chit{--border-radius:var(--radius-medium);height:var(--size);border-radius:var(--radius-medium)!important;width:auto!important}}}fig-field[direction=horizontal]:has(>fig-input-palette){padding-right:var(--spacer-2)}fig-slider{display:flex;& .slider{flex-grow:1}& fig-input-number{flex-basis:5rem}fig-field[direction=horizontal] &{flex:1;min-width:0}}fig-field,.fig-field{--field-label-width:4rem;padding:var(--spacer-1) var(--spacer-3);flex-direction:column;align-items:start;gap:0;margin:0;display:flex;&[direction=horizontal]{align-items:center;gap:var(--spacer-2);flex-direction:row}&>[full]{flex:auto}&:not(:has(>label))>[full]:not([full=false]){align-self:stretch;width:100%}&>label{padding:var(--spacer-1) 0;min-height:calc(1rem + var(--spacer-1) * 2);flex:0;justify-content:space-between;align-items:center;width:100%;display:flex}&[direction=horizontal]>label{width:auto;min-width:var(--field-label-width);max-width:var(--field-label-width);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}&[direction=horizontal]{gap:var(--spacer-2);flex-direction:row;align-items:start;&>label{min-width:4rem}&[columns=thirds]{gap:var(--spacer-2);grid-template-columns:repeat(3,1fr);display:grid;&>label{grid-column:1}&>label~*{grid-column:2/span 2}&:not(:has(>label))>*{grid-column:1/-1}}&[columns=half]{gap:var(--spacer-2);grid-template-columns:repeat(2,1fr);display:grid;&>label{grid-column:1}&>label~*{grid-column:2/span 2}&:not(:has(>label))>*{grid-column:1/-1}}}}fig-field-slider{--field-text-shadow:0 1px 1.5px light-dark(#0003,#0003);width:100%;display:block;position:relative;& label{pointer-events:none;z-index:1}&[disabled]:not([disabled=false]){pointer-events:none;& label,& input{color:var(--figma-color-text-disabled)}& fig-slider{filter:grayscale()opacity(.5)}}&[type=hue]{& label,& input{text-shadow:var(--field-text-shadow);color:#fff}}& fig-field{padding-left:var(--spacer-2-5);position:relative;&[direction=horizontal]>label{flex:auto;width:100%;min-width:0;max-width:none}& fig-slider{--slider-height:2rem;--slider-field-height:2rem;--slider-thumb-width:var(--spacer-1);--slider-thumb-color:light-dark(var(--figma-color-text-secondary),var(--figma-color-text));--slider-thumb-height:calc(var(--spacer-2) + (var(--spacer-3) - var(--spacer-2)) * min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-border-radius:var(--radius-medium);--slider-tick-width:.125rem;--slider-tick-height:var(--spacer-2);--slider-tick-radius:var(--radius-medium);--slider-stepper-padding:0;--slider-thumb-opacity:calc(min(var(--slider-complete), calc(1 - var(--slider-complete))) * 2);--slider-tick-opacity:1;position:absolute;inset:0;--slider-handle-shadow:inset 0 0 0 var(--slider-thumb-height) var(--slider-thumb-color)!important;&:has(input[type=range]:focus-within){--slider-thumb-outline:1.5px solid var(--figma-color-border-selected)!important;--slider-thumb-outline-offset:2px!important}& .fig-slider-input-container{box-shadow:none!important;&:hover,&:focus-within{&:after{content:"";pointer-events:none;border-radius:var(--slider-border-radius);position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--figma-color-border)!important}}&:before{background:var(--figma-color-bg-tertiary)!important;min-width:0!important;box-shadow:none!important}& input[type=range]{border-radius:0!important}}&:not([type=delta]) .fig-slider-input-container:before{width:var(--slider-percent)!important}&[type=delta] .fig-slider-input-container:before{--left-start:calc(var(--start-percent) - var(--slider-thumb-width) / 2)!important;left:min(var(--left-start), calc(var(--slider-percent) - var(--slider-complete) * var(--slider-thumb-width)))!important;--width:calc(var(--slider-percent) - var(--start-percent))!important;--abs-width:max(calc(var(--width) + var(--slider-thumb-width) / 2 + (1 - var(--slider-complete)) * var(--slider-thumb-width)), calc(-1 * var(--width) + var(--slider-thumb-width) / 2 + var(--slider-complete) * var(--slider-thumb-width)))!important;width:var(--abs-width)!important}}& datalist{mask-image:linear-gradient(to right, transparent 0, transparent var(--spacer-4), white, transparent calc(100% - var(--spacer-4)), transparent 100%)}& fig-input-number{right:var(--spacer-1);border-radius:var(--radius-small);background-color:#0000;flex:none;width:fit-content;min-width:fit-content;max-width:max-content;position:absolute;box-shadow:none!important;&:hover,&:has(input:focus){box-shadow:none!important}&:has(input:focus){box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)!important}& input{field-sizing:content;border-radius:var(--radius-small);text-align:right;width:auto;color:var(--field-text-color);flex:none}}}}fig-spinner{background-color:var(--figma-color-icon-tertiary);width:1rem;height:1rem;clip-path:path("M15.9995 7.86066C16.0271 9.44267 15.585 10.9973 14.729 12.3281C13.8731 13.6588 12.6417 14.7058 11.1907 15.3368C9.73968 15.9677 8.13415 16.1542 6.57716 15.8726C5.02016 15.591 3.58161 14.8541 2.44344 13.755C1.30526 12.6559 0.518574 11.2439 0.182856 9.69769C-0.152862 8.15147 -0.0225313 6.54042 0.557366 5.06826C1.13726 3.59611 2.14068 2.32898 3.44073 1.4271C4.74079 0.525221 6.27908 0.0291073 7.86109 0.00149397L7.87922 1.04037C6.50268 1.06439 5.16418 1.49607 4.03298 2.28081C2.90177 3.06556 2.02868 4.16812 1.5241 5.44907C1.01952 6.73002 0.906114 8.13183 1.19823 9.47724C1.49034 10.8226 2.17486 12.0512 3.16521 13.0076C4.15556 13.9639 5.40727 14.6052 6.76204 14.8502C8.11682 15.0951 9.51382 14.9329 10.7764 14.3839C12.0389 13.8349 13.1104 12.9239 13.8552 11.766C14.5999 10.6081 14.9846 9.25533 14.9606 7.87879L15.9995 7.86066Z");animation:1s linear infinite fig-spinner-spin;display:inline-flex}.segmented-control,fig-segmented-control{contain:layout paint;user-select:none;background-color:var(--figma-color-bg-secondary);border-radius:var(--radius-medium);--seg-indicator-x:0px;--seg-indicator-w:0px;--seg-indicator-opacity:0;--seg-indicator-transition-duration:0s;border:0;align-items:stretch;gap:0;height:1.5rem;padding:1px;display:inline-flex;position:relative;overflow:hidden;&:before{content:"";width:var(--seg-indicator-w);height:calc(100% - 2px);transform:translateX(var(--seg-indicator-x));border-radius:calc(var(--radius-medium) - 1px);background-color:var(--figma-color-bg);box-shadow:0 0 0 1px var(--figma-color-border);opacity:var(--seg-indicator-opacity);pointer-events:none;z-index:0;transition:transform var(--seg-indicator-transition-duration) ease, width var(--seg-indicator-transition-duration) ease, opacity .12s ease;position:absolute;top:1px;left:0}& fig-segment{z-index:1;appearance:none;color:var(--figma-color-text-secondary);padding:0 var(--spacer-2);flex:1 1 0;justify-content:center;align-items:center;transition:none;display:flex;position:relative;&[selected]:not([selected=false]),&[selected=true]{color:var(--figma-color-text);background-color:var(--figma-color-bg);border-radius:calc(var(--radius-medium) - 1px);box-shadow:0 0 0 1px var(--figma-color-border)}& svg{& [fill]{fill:currentColor}& [stroke]:not([stroke=none]){stroke:currentColor}}}&:not([sizing]),&[sizing=""],&[sizing=equal]{& fig-segment{flex:1 1 0}}&[sizing=auto]{flex:none;width:fit-content;max-width:100%;display:inline-flex;&[full]:not([full=false]){flex:none;align-self:auto;width:fit-content;display:inline-flex}& fig-segment{flex:none}}&[animated]:not([animated=false]){& fig-segment{&[selected]:not([selected=false]),&[selected=true]{box-shadow:none;background-color:#0000}}}&[size=large]{height:var(--spacer-5);& fig-segment{padding:0 var(--spacer-3)}}&[disabled]:not([disabled=false]){pointer-events:none;--seg-indicator-opacity:0;& fig-segment{color:var(--figma-color-text-disabled);box-shadow:none;background-color:#0000}}}@media (prefers-reduced-motion:reduce){.segmented-control:before,fig-segmented-control:before{transition:none!important}}fig-joystick{--size:100%;--aspect-ratio:1 / 1;--is-not-default:0;gap:var(--spacer-2);user-select:none;width:var(--size);flex-direction:column;display:flex;fig-field[direction=horizontal] &{flex:1;min-width:0;& fig-input-number{flex:1;width:auto}}& .joystick-values{gap:var(--spacer-2);grid-template-columns:1fr 1fr;display:grid}& .joystick-values>fig-input-number{width:100%}& .fig-input-joystick-plane-container{width:100%;aspect-ratio:var(--aspect-ratio);flex-grow:0;flex-shrink:0;place-items:center;display:flex;position:relative;&:focus{outline:0}}& .fig-joystick-reset{z-index:3;opacity:0;visibility:hidden;pointer-events:none;position:absolute;top:50%;left:50%;translate:-50% -50%;background-color:var(--figma-color-bg-secondary)!important;&:hover{& .fig-mask-icon{color:var(--figma-color-text)}}& .fig-mask-icon{--size:var(--spacer-3);color:var(--figma-color-text-tertiary)}}&:not([default]) .fig-joystick-reset{opacity:1;visibility:visible;pointer-events:auto}& .fig-joystick-axis-label{z-index:1;pointer-events:none;user-select:none;color:var(--figma-color-text-tertiary);letter-spacing:.01em;text-shadow:1px 0 0 var(--figma-color-bg-secondary), -1px 0 0 var(--figma-color-bg-secondary), 0 1px 0 var(--figma-color-bg-secondary), 0 -1px 0 var(--figma-color-bg-secondary);font-size:10px;font-weight:700;line-height:1;position:absolute;&.top{top:var(--spacer-2);left:50%;transform:translate(-50%)}&.bottom{bottom:var(--spacer-2);left:50%;transform:translate(-50%)}&.left{left:var(--spacer-2);transform-origin:50%;top:50%;transform:translateY(-50%)rotate(-90deg);&.no-rotate{transform:translateY(-50%)}}&.right{right:var(--spacer-2);transform-origin:50%;top:50%;transform:translateY(-50%)rotate(90deg)}}& .fig-input-joystick-plane{flex-shrink:0;place-items:center;width:100%;height:100%;display:inline-grid;position:relative}& .fig-input-joystick-plane>*{grid-area:1/1}& .fig-input-joystick-guides{width:var(--size);height:var(--size);border-radius:var(--radius-medium);background:var(--figma-color-bg-secondary);position:absolute;overflow:hidden;&:before{content:"";border-left:1px solid var(--figma-color-border);pointer-events:none;height:calc(100% - 2px);position:absolute;top:1px;left:calc(50% - .5px)}&:after{content:"";border-top:1px solid var(--figma-color-border);pointer-events:none;width:calc(100% - 2px);position:absolute;top:calc(50% - .5px);left:1px}}& .fig-input-joystick-plane.dragging .fig-input-joystick-guides{background:linear-gradient(45deg, transparent calc(50% - .5px), var(--figma-color-border) calc(50% - .5px), var(--figma-color-border) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(-45deg, transparent calc(50% - .5px), var(--figma-color-border) calc(50% - .5px), var(--figma-color-border) calc(50% + .5px), transparent calc(50% + .5px)), var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}& .fig-input-joystick-plane-container:focus .fig-input-joystick-guides{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected)}& fig-handle{z-index:4;position:absolute}}fig-input-angle{--size:1.5rem;align-items:center;gap:var(--spacer-2);user-select:none;display:inline-flex;&>fig-input-number{flex:none;width:auto}&[full]:not([full=false]){width:100%;display:flex;&>fig-input-number{flex:auto;width:auto;min-width:0}}fig-field[direction=horizontal] &{flex:1;min-width:0;& fig-input-number{flex:none;width:auto}}& .fig-input-angle-plane{width:var(--size);height:var(--size);aspect-ratio:1;background-color:var(--figma-color-bg-secondary);box-shadow:inset 0 0 0 1px var(--figma-color-border);border-radius:100%;flex-shrink:0;place-items:center;display:inline-grid;&:focus,&.dragging{box-shadow:inset 0 0 0 1px var(--figma-color-border-selected);outline:0}}& .fig-input-angle-handle{grid-area:1/1;place-items:center;width:calc(.5rem + 2px);height:calc(.5rem + 2px);display:inline-grid;&:before{content:"";background:var(--handle-color);width:.5rem;height:.5rem;box-shadow:var(--handle-shadow);border-radius:50%;display:block}}}fig-layer{--indent:var(--spacer-2);color:var(--figma-color-text);user-select:none;border-radius:var(--radius-medium);width:100%;display:block;position:relative;&:has(fig-layer){&>.fig-layer-row{&>.fig-layer-chevron{visibility:visible}}}&>.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);margin-left:0;display:flex;position:relative;& .fig-layer-chevron{mask-image:var(--icon-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}&:hover{background:var(--figma-color-bg-secondary);& .fig-layer-actions{opacity:1}}& .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}&>label{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--figma-color-text);flex:1;overflow:hidden}}& .fig-layer-actions{margin-right:calc(-1 * var(--spacer-1));opacity:0;flex-shrink:0;gap:0;transition:opacity .15s;display:flex;&>*{flex-shrink:0}}&>fig-layer{padding-left:var(--indent);margin-top:1px}&:not([open])>fig-layer,&[open=false]>fig-layer{display:none}&[open]:not([open=false]){&>.fig-layer-row>.fig-layer-chevron{rotate:0deg}}&[visible=false]>.fig-layer-row{&>label{color:var(--figma-color-text-tertiary)}}&[selected]:not([selected=false]){&>.fig-layer-row{background:var(--figma-color-bg-selected);&>.fig-layer-icon{color:var(--figma-color-icon)}}}}@keyframes fig-shimmer-text{0%{background-position:var(--shimmer-text-from,100% 0%)}to{background-position:var(--shimmer-text-to,0% 0%)}}@keyframes fig-shimmer-mask{0%{mask-position:var(--shimmer-mask-from,100% 0%)}to{mask-position:var(--shimmer-mask-to,0% 0%)}}fig-shimmer{--shimmer-angle:90deg;--shimmer-size:250% 100%;--shimmer-duration:1.5s;--shimmer-mask-from:100% 0%;--shimmer-mask-to:0% 0%;--shimmer-text-from:100% 0%;--shimmer-text-to:0% 0%;--shimmer-subtle-fill-color:var(--figma-color-bg-transparent);--shimmer-bright-fill-color:var(--figma-color-bg-tertiary);--shimmer-subtle-text-color:var(--figma-color-text-tertiary);--shimmer-bright-text-color:var(--figma-color-text);display:contents;&[direction=vertical]{--shimmer-angle:180deg;--shimmer-size:100% 250%;--shimmer-mask-from:0% 100%;--shimmer-text-from:0% 100%}&[direction=diagonal]{--shimmer-angle:135deg;--shimmer-size:250% 250%}&[playing=false] *{background:0 0;background-size:unset;animation:none}&[playing=false] :where(:not(:has(*)):not(:empty)){-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:unset}&:not([playing=false]) :where(:has(*),:empty){mask:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-fill-color) 0%, var(--shimmer-subtle-fill-color) 40%, var(--shimmer-bright-fill-color) 50%, var(--shimmer-subtle-fill-color) 60%, var(--shimmer-subtle-fill-color) 100%);mask-size:var(--shimmer-size);animation:fig-shimmer-mask var(--shimmer-duration) linear infinite}&:not([playing=false]) :where(:not(:has(*)):not(:empty)){background:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-text-color) 0%, var(--shimmer-subtle-text-color) 40%, var(--shimmer-bright-text-color) 50%, var(--shimmer-subtle-text-color) 60%, var(--shimmer-subtle-text-color) 100%);background-size:var(--shimmer-size);animation:fig-shimmer-text var(--shimmer-duration) linear infinite;mask:none;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important}}fig-skeleton{--shimmer-angle:90deg;--shimmer-size:250% 100%;--shimmer-duration:1.5s;--shimmer-mask-from:100% 0%;--shimmer-mask-to:0% 0%;--shimmer-subtle-mask-color:#000000bf;--shimmer-bright-mask-color:#000;display:contents;&[direction=vertical]{--shimmer-angle:180deg;--shimmer-size:100% 400%;--shimmer-mask-from:0% 100%}&[direction=diagonal]{--shimmer-angle:135deg;--shimmer-size:250% 250%}&:not([playing=false]) *{mask:linear-gradient(var(--shimmer-angle), var(--shimmer-subtle-mask-color) 0%, var(--shimmer-subtle-mask-color) 40%, var(--shimmer-bright-mask-color) 50%, var(--shimmer-subtle-mask-color) 60%, var(--shimmer-subtle-mask-color) 100%);mask-size:var(--shimmer-size);animation:fig-shimmer-mask var(--shimmer-duration) linear infinite;& *{color:#0000}}& label,& h3,& h2,& p,& span{background:var(--figma-color-bg-secondary);border-radius:var(--radius-medium)}& :not(fig-field,fig-header){border-radius:var(--radius-medium);pointer-events:none;user-select:none;background:var(--figma-color-bg-secondary)!important;box-shadow:none!important;color:var(--figma-color-bg-secondary)!important}& ::placeholder{color:#0000!important}& :after,& :before,& ::marker,& ::picker-icon,& ::-webkit-slider-thumb,& ::-webkit-slider-runnable-track,& ::-webkit-color-swatch,& ::-webkit-color-swatch-wrapper,& ::-webkit-details-marker,& ::-webkit-inner-spin-button,& ::-webkit-outer-spin-button,& ::-webkit-calendar-picker-indicator{display:none!important}}fig-fill-picker{display:contents;&>[slot^=mode-]{display:none}}fig-preview{aspect-ratio:1;width:calc(100% - var(--spacer-3) * 2);margin:0 var(--spacer-3);margin-top:var(--spacer-2);margin-bottom:var(--spacer-2);border-radius:var(--radius-medium);place-items:center;display:inline-grid;position:relative;&:before,&:after,&>*{border-radius:inherit;grid-area:1/1;place-self:center;width:100%;height:100%}&:after{content:"";box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);grid-area:1/1;place-self:center}}.fig-fill-picker-dialog{contain:layout;width:240px;padding:0;&>fig-header{padding:var(--spacer-2);justify-content:space-between;align-items:center;display:flex}& fig-tab{padding:var(--spacer-1) var(--spacer-1);font-size:.6875rem}&>fig-content{padding-bottom:var(--spacer-2-5)}& .fig-fill-picker-type-label{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--figma-color-text);padding:var(--spacer-1) var(--spacer-2)}& .fig-fill-picker-gamut{margin-left:auto}& .fig-fill-picker-tab{display:none;&:first-child{display:block}}& .fig-fill-picker-color-area{& canvas{border-radius:var(--radius-medium);width:100%;height:100%}}& .fig-fill-picker-color-area fig-handle{z-index:1}& .fig-fill-picker-sliders{grid-template-columns:calc(3.5rem + var(--spacer-3)) 1fr;padding-right:var(--spacer-3);align-items:center;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}}& .fig-fill-picker-inputs{& .fig-fill-picker-input-mode{width:3.5rem}& .fig-fill-picker-input-fields{flex:1;min-width:0;display:flex;& .input-combo,& fig-input-text{flex:1;min-width:0}}}& .fig-fill-picker-gradient-header{& .fig-fill-picker-gradient-type{flex:1;min-width:0}&>:last-child fig-button{margin-left:auto}& .fig-fill-picker-gradient-center{& fig-input-number{width:48px}}}& .fig-fill-picker-gradient-bar{background:linear-gradient(90deg,#d9d9d9 0%,#737373 100%)}& .fig-fill-picker-gradient-stops-handles{pointer-events:none;position:absolute;inset:0}& .fig-fill-picker-gradient-stops{& .fig-fill-picker-gradient-stops-header{&>span{flex:1}}}& .fig-fill-picker-gradient-stops-list{gap:var(--spacer-1);flex-direction:column;display:flex}& .fig-fill-picker-gradient-stop-row{padding-right:var(--spacer-2);&>.fig-fill-picker-stop-position{flex: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-fill-picker-media-header{& .fig-fill-picker-scale-mode{flex:1}& .fig-fill-picker-scale{width:56px}}& .fig-fill-picker-media-preview{aspect-ratio:1;margin:var(--spacer-1) var(--spacer-3);border-radius:var(--radius-medium);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;&.dragover{outline:2px dashed var(--figma-color-border-brand);outline-offset:-2px}&.has-media{& fig-button{visibility:hidden}&:hover{& fig-button{visibility:visible}}}}& .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}& .fig-fill-picker-image-preview{width:100%;height:100%;display:none;position:absolute;inset:0}& .fig-fill-picker-video-preview{object-fit:cover;width:100%;height:100%;display:none;position:absolute;inset:0}& .fig-fill-picker-upload{z-index:1;position:relative}& .fig-fill-picker-webcam-preview{aspect-ratio:1;margin:0 var(--spacer-3);border-radius:var(--radius-medium);margin-bottom:var(--spacer-2);position:relative;overflow:hidden}& .fig-fill-picker-webcam-video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}& .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{gap:var(--spacer-1);display:flex;& .fig-fill-picker-camera-select{flex:1}& .fig-fill-picker-webcam-capture{flex-shrink:0}}}.fig-mask-icon{contain:strict;--size:var(--spacer-4);--icon:var(--icon-add);width:var(--size);height:var(--size);mask-image:var(--icon);mask-position:50%;mask-size:contain;mask-repeat:no-repeat;-webkit-mask-image:var(--icon);background:currentColor;display:inline-flex;-webkit-mask-position:50%;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat}@keyframes fig-spinner-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}fig-chooser{--chooser-fade-size:var(--spacer-4);scrollbar-width:none;scroll-snap-type:y mandatory;flex-direction:column;gap:1px;display:flex;overflow:visible auto;&>*{scroll-snap-align:start}&[padding=false]{gap:var(--spacer-2);& fig-choice{--fig-choice-padding:0px}}&[overflow=scrollbar]{scrollbar-width:thin;scrollbar-color:var(--figma-color-border) transparent}&[layout=horizontal]{scrollbar-width:none;flex-flow:row;overflow:auto hidden;&[overflow=scrollbar]{scrollbar-width:thin;scrollbar-color:var(--figma-color-border) transparent}&>:not(.fig-chooser-nav-start):not(.fig-chooser-nav-end){flex:1}& fig-image[full]{min-width:3rem}}&[layout=grid]{grid-template-columns:1fr 1fr;display:grid;&>*{width:100%;min-width:0}&>.fig-chooser-nav-start,&>.fig-chooser-nav-end{grid-column:1/-1}}&[full]:not([full=false]){width:100%}&[disabled]:not([disabled=false]){pointer-events:none;opacity:.4}& .fig-chooser-nav-start,& .fig-chooser-nav-end{all:unset;z-index:3;cursor:pointer;opacity:0;pointer-events:none;color:var(--figma-color-icon);flex-shrink:0;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:sticky;&:hover{background:var(--figma-color-bg)!important}&:after{content:"";width:1rem;height:1rem;mask-image:var(--icon-chevron);background:currentColor;display:block;mask-position:50%;mask-size:contain;mask-repeat:no-repeat}}& .fig-chooser-nav-start{width:100%;height:var(--chooser-fade-size);margin-bottom:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to bottom, var(--eased-fade-stops));top:0;left:0;right:0;&:hover{box-shadow:0 1px 0 0 var(--figma-color-border)!important}&:after{rotate:180deg}}& .fig-chooser-nav-end{width:100%;height:var(--chooser-fade-size);margin-top:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to top, var(--eased-fade-stops));bottom:0;left:0;right:0;&:hover{box-shadow:0 -1px 0 0 var(--figma-color-border)!important}}&[layout=horizontal]{& .fig-chooser-nav-start,& .fig-chooser-nav-end{height:auto;width:var(--chooser-fade-size);align-self:stretch;margin:0;top:0;bottom:0}& .fig-chooser-nav-start{margin-right:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to right, var(--eased-fade-stops));left:0;right:auto;&:hover{box-shadow:1px 0 0 0 var(--figma-color-border)!important}&:after{rotate:90deg}}& .fig-chooser-nav-end{margin-left:calc(var(--chooser-fade-size) * -1);background:linear-gradient(to left, var(--eased-fade-stops));left:auto;right:0;&:hover{box-shadow:-1px 0 0 0 var(--figma-color-border)!important}&:after{rotate:-90deg}}}&.overflow-start>.fig-chooser-nav-start,&.overflow-end>.fig-chooser-nav-end{opacity:1;pointer-events:auto}}fig-choice{--fig-choice-selection-ring-width:1.25px;--fig-choice-padding:var(--spacer-2);--fig-choice-border-radius:calc(var(--radius-medium) + var(--fig-choice-padding));border-radius:var(--fig-choice-border-radius);align-items:center;gap:var(--spacer-2);cursor:default;padding:var(--fig-choice-padding);border:1px solid #0000;outline:none;flex-direction:column;display:flex;&:hover:not([selected]):not([disabled]):not([aria-disabled=true]){background-color:var(--figma-color-bg-secondary)}&[padding=false]{--fig-choice-padding:0px}&[selected]{position:relative;&:after{content:"";border-radius:var(--fig-choice-border-radius);pointer-events:none;z-index:1;box-shadow:inset 0 0 0 4px var(--figma-color-bg);outline:var(--fig-choice-selection-ring-width) solid var(--figma-color-border-selected);outline-offset:calc(var(--fig-choice-selection-ring-width) * -1);position:absolute;inset:0}background-color:var(--figma-color-bg-secondary)}&[disabled]:not([disabled=false]),&[aria-disabled=true]{pointer-events:none;opacity:.4;cursor:default}}fig-handle{--width:.875rem;--height:.875rem;--fill:var(--figma-color-bg-brand);--border-radius:50%;--ring-width:.125rem;--box-shadow:0px 0 0 .5px #0000001a, var(--elevation-100-canvas);--outline:none;--border:none;--fig-handle-hit-area-opacity:0;--fig-handle-hit-area-size:0;width:var(--width);height:var(--height);border-radius:var(--border-radius);place-items:center;margin:0;padding:0;display:grid;&:before{content:"";color-scheme:light only;width:var(--width);height:var(--height);background:var(--handle-color);border-radius:var(--border-radius);box-shadow:var(--box-shadow);outline:var(--outline);border:var(--border);z-index:1;grid-area:1/1;place-self:center}&:after{content:"";color-scheme:light only;width:calc(var(--width) - var(--ring-width) * 2);height:calc(var(--height) - var(--ring-width) * 2);background:var(--fill);border-radius:var(--border-radius);box-shadow:inset 0 0 0 1px var(--figma-color-bordertranslucent);z-index:2;grid-area:1/1;place-self:center}&[size=small]{--width:11px;--height:11px}&[drag]:not([drag=false]){touch-action:none;position:absolute}&:hover,&[selected]:not([selected=false]){outline:1px solid var(--figma-color-border-selected);outline-offset:0}&[disabled]:not([disabled=false]),&[aria-disabled=true]{pointer-events:none;cursor:default}&[type=color],&[control]{overflow:visible;& fig-color-tip{z-index:10;position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%)}}& .fig-handle-hit-area{inset:calc(var(--fig-handle-hit-area-size) * -.5px);pointer-events:auto;opacity:var(--fig-handle-hit-area-opacity,0);z-index:0;background:red;position:absolute}}fig-color-tip{--tip-selection-width:1px;--tip-selection-scale:1;--beak-offset:50%;contain:layout;inset:unset;color:var(--figma-color-text);color-scheme:light only;aspect-ratio:1;background-color:var(--figma-color-bg);border-radius:var(--radius-medium,.3125rem);filter:drop-shadow(0 1px 1.5px #0000001a)drop-shadow(0 2.5px 6px #00000021)drop-shadow(0 0 .5px #00000026);flex-shrink:0;place-items:center;min-width:max-content;min-height:max-content;display:inline-grid;position:relative;overflow:visible;box-shadow:inset 0 .5px #ffffff1a;&[control=add],&[control=remove]{cursor:pointer}& fig-chit{& input[type=color]{background:0 0}}&[selected]:not([selected=false]):before{content:"";background:var(--figma-color-border-selected);clip-path:var(--tip-pointer);width:6px;height:3px;top:100%;left:var(--beak-offset,50%);z-index:1;pointer-events:none;transform:translate(-50%, 0) scale(var(--tip-selection-scale));transform-origin:50% 0;position:absolute}&:after{content:"";background-color:inherit;clip-path:var(--tip-pointer);width:6px;height:3px;top:calc(100% - 1px);left:var(--beak-offset,50%);z-index:3;position:absolute;transform:translate(-50%)}&[position=bottom]{&[selected]:not([selected=false]):before{top:1px;left:var(--beak-offset,50%);transform:translate(-50%, -100%) scale(var(--tip-selection-scale)) scaleY(-1);transform-origin:50% 100%}&:after{top:1px;left:var(--beak-offset,50%);transform:translate(-50%,-100%)scaleY(-1)}}}fig-canvas-control{--fig-canvas-control-line-stroke:#ffffff80;--fig-canvas-control-line-stroke-hover:var(--figma-color-bg-brand);--fig-canvas-control-line-stroke-active:var(--figma-color-bg-brand);--fig-canvas-control-line-stroke-width:1.5px;display:contents;&>fig-handle,&>fig-tooltip:has(fig-handle:not([size=small])){z-index:1}& .fig-canvas-control-radius{pointer-events:none;position:absolute;overflow:visible;& circle{fill:none;stroke:var(--fig-canvas-control-line-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& .fig-canvas-control-radius-hit{stroke:#0000;stroke-width:12px;pointer-events:stroke;filter:none;&:hover~circle{stroke:var(--fig-canvas-control-line-stroke-hover)}}}&:has(.fig-canvas-control-radius-hit:hover) .fig-canvas-control-angle-line,&.fig-canvas-control-ring-active .fig-canvas-control-angle-line,&.fig-canvas-control-ring-active .fig-canvas-control-radius circle:not(.fig-canvas-control-radius-hit){stroke:var(--fig-canvas-control-line-stroke-active)}& .fig-canvas-control-angle-svg{pointer-events:none}& .fig-canvas-control-angle-line{stroke:var(--fig-canvas-control-line-stroke);stroke-width:var(--fig-canvas-control-line-stroke-width);paint-order:stroke fill;filter:drop-shadow(0 0 .5px #0000004d)drop-shadow(0 .5px 1px #0000001f)}& fig-handle[size=small]{z-index:2;& .fig-handle-hit-area{cursor:grab}}}