@pantoken/pendo 0.3.17 → 0.4.0

package/README.md

@@ -75,6 +75,21 @@ Inside a banner, Pendo primary and custom buttons use the filled primary-on-colo
 Secondary and tertiary buttons use the transparent resting treatment and filled interaction states;
 the guide close button keeps its standard appearance and receives banner-specific positioning.
 
+### Banner popovers and surveys
+
+Prefix the class with `instui-banner` to give a popover or survey the banner surface, icon swatch,
+and spacing while keeping its overlay drop shadow. Suffixes still compose, so `instui-banner-poll` is
+a violet survey with the question-message glyph and `instui-banner-sea-megaphone` is a sea one with a
+megaphone.
+
+This is keyed on the class rather than on Pendo's layout, because Pendo ships survey layouts we do
+not enumerate — a PMF survey arrives with no `data-layout` at all, an NPS survey with
+`data-layout="bannerNpsSurvey"`. Both pick up the treatment from the same class. Alerts ignore
+`instui-banner` and keep their sidebar strip.
+
+Sizing still follows the guide container, so a narrow anchored survey renders compact while a
+full-width one renders relaxed.
+
 ## How it fits together
 
 - **Token layer** — pantoken's `@pantoken/css` emits the `--instui-*` custom properties, scoped to the guide container `[class*="instui"]`. This is the drop-in replacement for pendo-styles' generated `vendor/tokens.css`.

package/dist/global.css

@@ -1,2 +1,2 @@
-/*! @pantoken/pendo@0.3.17 */
-@scope([class*=instui]._pendo-step-container){:scope{--ns:#fff;--no:#0000;--mi:#03893d;--mj:#037d37;--mk:#f2f4f5;--mt:#dfe1e3;--mu:#aab0b5;--mv:#9ea6ad;--mw:#8d959f;--mx:#7e8792;--ml:#6a7883;--mm:#5f6e7a;--mn:#576773;--mo:#4a5b68;--mp:#334450;--mq:#273540;--mr:#1c222b;--ms:#171b21;--mf:#accdf7;--mg:#7fb4f1;--mh:#4798e3;--mc:#2b7abc;--md:#2369a4;--me:#1a5281;--nj:#e62429;--nk:#cf1f24;--ni:#cf4a00;--nr:#f3e5f7;--np:#9e58bd;--nq:#522965;--nn:#cff0f6;--nl:#00828e;--nm:#00424a;--mz:#eef4fd;--nf:#d5e2f6;--ng:#b6ccea;--nh:#86a8d5;--na:#2e5177;--nb:#234465;--nc:#213d5b;--nd:#1d354f;--ne:#061c30;--nt:#ffffff1a;--nu:#ffffffbf;--my:#1c222bbf;--ob:.0625rem;--of:.125rem;--oj:.25rem;--ol:.5rem;--oc:.75rem;--od:.875rem;--oe:1rem;--og:1.25rem;--oh:1.5rem;--oi:2rem;--ok:2.5rem;--nw:Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;--nv:Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif;--nz:400;--ny:500;--oa:600;--nx:700;--ls:150%;--lu:125%;--lq:125%;--lr:1.125rem;--kg:solid;--kd:0rem;--hv:999rem;--ii:0rem;--hm:.375rem;--gm:underline;--gj:1rem;--gi:1.25rem;--fv:1.5rem;--di:normal;--de:solid;--dl:.25rem;--cl:solid;--cj:#5f6e7a1a;--co:.5rem;--cn:.5rem;--by:solid;--ca:.5rem;--cb:.5rem;--le:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E);--lf:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E);--lg:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E);--lh:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E);--li:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E);--lj:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E);--lk:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22%2F%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2022h4%22%2F%3E%3C%2Fsvg%3E);--ll:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E);--lm:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E);--ln:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E);--lo:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E);--lp:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E)}@layer instui.tokens{:scope{--oo:var(--oi);--on:var(--ok);--om:var(--oh);--pb:var(--of);--pa:var(--oj);--oy:var(--ol);--ox:var(--oc);--ow:var(--oe);--oz:var(--oh);--oq:var(--oc);--op:var(--oe);--or:var(--ol);--ot:var(--ol);--os:var(--oe);--ov:var(--ol);--ou:var(--oc);--e:var(--oj);--d:var(--ol);--c:var(--oc);--a:var(--oe);--b:var(--oc);--h:var(--ob);--g:var(--of);--f:var(--ob);--kv:var(--nw);--ku:var(--nv);--la:var(--nz);--lb:var(--oa);--lc:var(--nx);--ld:var(--ny);--lt:var(--og);--lw:var(--oc);--lv:var(--oe);--kz:var(--oc);--ky:var(--od);--kw:var(--oe);--kx:var(--og);--aa:light-dark(var(--nr),var(--nq));--z:light-dark(var(--nn),var(--nm));--w:light-dark(var(--ns),var(--ms));--x:light-dark(var(--ns),var(--ms));--n:light-dark(var(--nd),var(--mz));--p:light-dark(var(--nb),var(--ns));--m:light-dark(var(--ne),var(--nf));--o:light-dark(var(--mt),var(--mp));--u:light-dark(var(--mt),var(--mp));--r:var(--ns);--t:var(--nf);--q:var(--ng);--s:var(--mw);--v:light-dark(var(--mz),var(--na));--l:var(--nt);--j:var(--np);--i:var(--nl);--k:light-dark(var(--ns),var(--ms));--y:light-dark(var(--nu),var(--my));--ak:light-dark(var(--mw),var(--ml));--bh:var(--mi);--al:var(--nj);--bi:var(--ni);--am:var(--mc);--bb:light-dark(var(--mc),var(--mh));--bc:var(--ns);--bd:light-dark(var(--mx),var(--mm));--be:light-dark(var(--mp),var(--mx));--bf:var(--mw);--bg:light-dark(var(--mr),var(--ns));--ap:light-dark(var(--nd),var(--mz));--ar:light-dark(var(--nb),var(--ns));--ao:light-dark(var(--ne),var(--nf));--aq:light-dark(var(--mt),var(--mp));--aw:light-dark(var(--mt),var(--mp));--an:var(--nk);--ba:var(--mj);--at:var(--ns);--av:var(--nf);--as:var(--ng);--au:var(--mw);--ay:var(--ns);--ax:var(--ng);--az:var(--mw);--bj:light-dark(var(--mq),var(--mk));--bv:light-dark(var(--mn),var(--mu));--br:light-dark(var(--mw),var(--mn));--bs:light-dark(var(--mp),var(--mv));--bt:light-dark(var(--mm),var(--mx));--bu:light-dark(var(--me),var(--mf));--bq:light-dark(var(--mv),var(--ml));--bk:light-dark(var(--ns),var(--nd));--bl:light-dark(var(--mv),var(--ml));--bn:var(--nc);--bp:var(--nc);--bm:var(--nc);--bo:var(--mo);--ae:var(--ns);--ad:light-dark(var(--mw),var(--mn));--ab:light-dark(#23446526,#0000004d);--ac:light-dark(#2344651a,#00000026);--bw:var(--no);--ai:light-dark(var(--mq),var(--ns));--aj:light-dark(var(--md),var(--mg));--af:light-dark(var(--nd),var(--mz));--ag:light-dark(var(--ns),var(--nd));--ah:light-dark(var(--nd),var(--ns));--kh:var(--ai);--kf:var(--k);--jr:var(--w);--js:var(--x);--jt:var(--bd);--ju:var(--be);--jv:var(--b);--jw:var(--f);--kc:var(--ai);--jx:var(--ku);--jz:var(--ld);--jy:var(--ky);--ka:var(--oo);--kb:var(--oy);--iq:var(--w);--ir:var(--x);--is:var(--bd);--it:var(--be);--iu:var(--b);--iv:var(--f);--jf:var(--ai);--jd:var(--bt);--je:var(--bs);--iw:var(--ku);--iy:var(--la);--ix:var(--ky);--iz:var(--ox);--jc:var(--ox);--ji:var(--la);--jh:var(--kw);--jm:var(--ls);--jj:var(--ku);--jk:var(--lb);--jl:var(--ls);--jn:var(--ku);--jp:var(--la);--jo:var(--ky);--jq:var(--ls);--jg:var(--ai);--ke:var(--bv);--ip:var(--ak);--hw:var(--e);--il:var(--pb);--ik:var(--pa);--ij:var(--oy);--ih:var(--ox);--ig:var(--ow);--id:var(--ox);--if:var(--oq);--ie:var(--op);--in:var(--ot);--im:var(--os);--hz:var(--pb);--ic:var(--g);--hy:var(--bb);--ia:var(--bc);--ib:var(--ba);--hx:var(--an);--io:var(--h);--hg:var(--w);--hh:var(--x);--hi:var(--bd);--hj:var(--bf);--hk:var(--bg);--hp:var(--ky);--hu:var(--lt);--ho:var(--ku);--hq:var(--la);--hr:var(--oy);--hl:var(--f);--hs:var(--ai);--ht:var(--ai);--hn:var(--om);--he:var(--ak);--hf:var(--c);--gt:var(--k);--gu:var(--ai);--gv:var(--ku);--gw:var(--la);--gx:var(--la);--gy:var(--v);--gz:var(--bj);--ha:var(--lu);--hb:var(--ox);--hc:var(--n);--hd:var(--bk);--gr:var(--kz);--gs:var(--la);--gq:var(--p);--gp:var(--y);--gl:var(--aj);--go:var(--bu);--gn:var(--br);--gk:var(--ld);--gg:var(--ai);--gh:var(--ad);--fu:var(--kv);--fw:var(--lc);--fx:var(--lq);--gc:var(--kv);--ge:var(--lc);--gd:var(--kx);--gf:var(--lq);--fy:var(--kv);--ga:var(--lc);--fz:var(--kw);--gb:var(--lq);--ft:var(--ai);--fo:var(--ku);--fq:var(--la);--fp:var(--kw);--fs:var(--lr);--fr:var(--or);--dm:var(--af);--dn:var(--af);--do:var(--ag);--dp:var(--af);--dq:var(--af);--dr:var(--ag);--ds:var(--o);--dt:var(--aq);--du:var(--bl);--dv:light-dark(#1d354f33,var(--l));--dw:light-dark(#1d354f66,var(--mz));--dx:light-dark(#1d354f,var(--mz));--dy:light-dark(#1d354f1a,var(--l));--dz:var(--af);--ea:var(--af);--eb:var(--ag);--ec:var(--q);--ed:var(--r);--ee:var(--at);--ef:var(--bn);--eg:var(--l);--eh:var(--ay);--ei:var(--l);--ej:var(--t);--ek:var(--as);--el:var(--bm);--em:var(--s);--en:var(--au);--eo:var(--bo);--ep:var(--av);--eq:var(--bp);--er:light-dark(#3d658f33,var(--nh));--es:light-dark(#44709f00,var(--nh));--et:var(--ah);--eu:light-dark(#44709f33,var(--nh));--ev:light-dark(#44709f00,var(--nh));--ew:var(--ah);--ex:var(--u);--ey:var(--aw);--ez:var(--bq);--fa:light-dark(#4d7eb333,var(--nh));--fb:light-dark(#44709f00,var(--nh));--fc:var(--ah);--fd:var(--ax);--fe:var(--az);--ff:var(--ky);--dk:var(--on);--fg:var(--oo);--fh:var(--ou);--dd:var(--b);--df:var(--ku);--dg:var(--ld);--dh:var(--pa);--fi:light-dark(#1d354f4d,var(--mz));--fj:light-dark(#1d354f,var(--mz));--fk:light-dark(#c7cacd,var(--mo));--fl:light-dark(#aab0b5,var(--mo));--fm:light-dark(#1d354f33,var(--mz));--fn:light-dark(#1d354f,var(--mz));--dj:var(--lu);--ck:var(--a);--cw:var(--c);--cr:var(--d);--cm:var(--h);--cp:var(--ai);--cu:var(--ae);--db:var(--aa);--dc:var(--j);--cz:var(--z);--da:var(--i);--cy:var(--oz);--cx:var(--oz);--cv:var(--ow);--cq:var(--oy);--cs:var(--ox);--ct:var(--ox);--bx:var(--c);--bz:var(--g);--ce:var(--al);--cf:var(--ae);--cg:var(--am);--ch:var(--bh);--ci:var(--bi);--cd:var(--ox);--cc:var(--oz);--pendo-embedded-width:59.25rem;--pendo-alert-indent:2.5rem;--pendo-overlay-width:22.5rem;--pendo-space-0:var(--ii);--pendo-input-border-style:solid;--jb:4rem;--ja:6rem;--lx:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjcxLjcxIDI3MS44IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0zOS40MiAxMzUuNjFjLS4wMi0xOS44My0xNC44MS0zNi41NC0zNC40OS0zOC45Ny02LjU4IDI1LjU2LTYuNTggNTIuMzcgMCA3Ny45MiAxOS42OC0yLjQyIDM0LjQ3LTE5LjEyIDM0LjQ5LTM4Ljk1Ii8+PHBhdGggZD0ibTYyLjI0IDEyMy4yOGMtNi44MSAwLTEyLjMzIDUuNTItMTIuMzMgMTIuMzNzNS41MiAxMi4zMyAxMi4zMyAxMi4zMyAxMi4zMy01LjUyIDEyLjMzLTEyLjMzYzAtNi44MS01LjUyLTEyLjMzLTEyLjMzLTEyLjMzeiIvPjxwYXRoIGQ9Im0yMzIuMjkgMTM1LjYxYy4wMSAxOS44MyAxNC44MSAzNi41MyAzNC40OSAzOC45NSA2LjU4LTI1LjU2IDYuNTgtNTIuMzcgMC03Ny45Mi0xOS42OCAyLjQ0LTM0LjQ2IDE5LjE0LTM0LjQ5IDM4Ljk3Ii8+PHBhdGggZD0ibTIwOS4zOSAxMjMuMjhjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAgMCAwLS4wMSAwLS4wMiAwLTYuOC01LjUxLTEyLjMyLTEyLjMxLTEyLjMzIi8+PHBhdGggZD0ibTEzNS41OSAyMzIuNGMtMTkuODIuMDItMzYuNTIgMTQuOC0zOC45NSAzNC40NiAyNS41NiA2LjU4IDUyLjM3IDYuNTggNzcuOTIgMC0yLjQzLTE5LjY4LTE5LjE0LTM0LjQ2LTM4Ljk3LTM0LjQ2Ii8+PHBhdGggZD0ibTEzNS42MSAxOTcuMjNjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAgMCAwLS4wMSAwLS4wMiAwLTYuOC01LjUxLTEyLjMyLTEyLjMxLTEyLjMzIi8+PHBhdGggZD0ibTEzNS42MSAzOS40YzE5LjgyIDAgMzYuNTMtMTQuNzkgMzguOTUtMzQuNDYtMjUuNTYtNi41OC01Mi4zNy02LjU4LTc3LjkyIDAgMi40NCAxOS42NyAxOS4xNSAzNC40NSAzOC45NyAzNC40NiIvPjxwYXRoIGQ9Im0xMzUuNjEgNDkuOTNjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAtLjAxIDAtLjAzIDAtLjA0IDAtNi44LTUuNTEtMTIuMzEtMTIuMzEtMTIuMzF6Ii8+PHBhdGggZD0ibTIwMy45MiAyMDMuOTJjLTEzLjk5IDE0LjAyLTE1LjM2IDM2LjI2LTMuMiA1MS45IDIyLjczLTEzLjQxIDQxLjY4LTMyLjM3IDU1LjA4LTU1LjEtMTUuNjMtMTIuMTYtMzcuODYtMTAuNzgtNTEuODggMy4yIi8+PHBhdGggZD0ibTE3OS4wNSAxNzkuMDVjLTQuODEgNC44MS00LjgxIDEyLjYyIDAgMTcuNDNzMTIuNjIgNC44MSAxNy40MyAwIDQuODEtMTIuNjIgMC0xNy40M2MtNC44Mi00LjgtMTIuNjItNC44LTE3LjQzIDAiLz48cGF0aCBkPSJtNjcuNSA2Ny41YzE0LjAxLTE0IDE1LjM5LTM2LjI2IDMuMi01MS44OC0yMi43MyAxMy40LTQxLjY4IDMyLjM1LTU1LjA4IDU1LjA4IDE1LjYyIDEyLjE4IDM3Ljg3IDEwLjgxIDUxLjg4LTMuMiIvPjxwYXRoIGQ9Im03NC45MyA3NC45NWMtNC44MSA0LjgxLTQuODEgMTIuNjIgMCAxNy40M3MxMi42MiA0LjgxIDE3LjQzIDAgNC44MS0xMi42MiAwLTE3LjQzYy00LjgyLTQuOC0xMi42Mi00LjgtMTcuNDMgMCIvPjxwYXRoIGQ9Im0yMDMuODMgNjcuMzdjMTQuMDMgMTMuOTggMzYuMjggMTUuMzMgNTEuOSAzLjE0LTEzLjQxLTIyLjcxLTMyLjM3LTQxLjY0LTU1LjEtNTUuMDItMTIuMTYgMTUuNjMtMTAuNzggMzcuODYgMy4yIDUxLjg4Ii8+PHBhdGggZD0ibTE5Ni40IDkyLjI0YzQuOC00LjgxIDQuOC0xMi42IDAtMTcuNC00LjgxLTQuOC0xMi42LTQuOC0xNy40IDAtNC44IDQuODEtNC44IDEyLjU5IDAgMTcuNHMxMi42IDQuODEgMTcuNCAweiIvPjxwYXRoIGQ9Im02Ny40MyAyMDMuNzdjLTE0LjAxLTEzLjk5LTM2LjI1LTE1LjM2LTUxLjg4LTMuMiAxMy40IDIyLjczIDMyLjM2IDQxLjY5IDU1LjA4IDU1LjEgMTIuMTgtMTUuNjMgMTAuOC0zNy44OC0zLjItNTEuOSIvPjxwYXRoIGQ9Im03NC43OCAxNzguOWMtNC44MSA0LjgxLTQuODEgMTIuNjIgMCAxNy40M3MxMi42MiA0LjgxIDE3LjQzIDAgNC44MS0xMi42MiAwLTE3LjQzYy00LjgyLTQuNzktMTIuNjEtNC43OS0xNy40MyAwIi8+PC9nPjwvc3ZnPg==);--mb:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUzLjAxIDE5Mi42IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0yMjYuMzIgMTU0LjQ4YzAgNy4zNi01Ljk3IDEzLjM2LTEzLjM2IDEzLjM2aC0xNzQuODRjLTcuMzYgMC0xMy4zNi01Ljk3LTEzLjM2LTEzLjM2di0xMTQuNDdjMC03LjM2IDUuOTctMTMuMzYgMTMuMzYtMTMuMzZoMTI3LjYxdi0yNC43NmgtMTMyLjY4Yy0xOC4yNiAwLTMzLjA1IDE0Ljc5LTMzLjA1IDMzLjAxdjEyNC42NWMwIDE4LjI2IDE0Ljc5IDMzLjA1IDMzLjA1IDMzLjA1aDE4NS4wNmMxOC4yNiAwIDMzLjA1LTE0Ljc5IDMzLjA1LTMzLjA1di03Mi4zMWgtMjQuNzZ2NjcuMmwtLjA3LjA0eiIvPjxwYXRoIGQ9Im0yMzguNzIgMjguNThjNy45IDAgMTQuMjktNi4zOSAxNC4yOS0xNC4yOXMtNi4zOS0xNC4yOS0xNC4yOS0xNC4yOS0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjl6Ii8+PHBhdGggZD0ibTE5Ni42NCAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5cy02LjM5LTE0LjI5LTE0LjI5LTE0LjI5LTE0LjI5IDYuMzktMTQuMjkgMTQuMjkgNi4zOSAxNC4yOSAxNC4yOSAxNC4yOXoiLz48cGF0aCBkPSJtMjM4LjcyIDQyLjA5Yy03LjkgMC0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5czYuMzkgMTQuMjkgMTQuMjkgMTQuMjkgMTQuMjktNi4zOSAxNC4yOS0xNC4yOS02LjM5LTE0LjI5LTE0LjI5LTE0LjI5eiIvPjxjaXJjbGUgY3g9Ijc0LjYiIGN5PSIxMTguMTgiIHI9IjI5LjYyIi8+PC9nPjwvc3ZnPg==);--ma:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUxLjQzIDE0Ny42MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzAuNCA4Ni44MmMtMTYuNzkgMC0zMC40IDEzLjYxLTMwLjQgMzAuNCAwIDE2Ljc5IDEzLjYxIDMwLjQgMzAuNCAzMC40czMwLjQtMTMuNjEgMzAuNC0zMC40YzAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PHBhdGggZD0ibTEyNS43MSA4Ni44MmMtMy42NiAwLTcuMTYuNjgtMTAuNDEgMS44N2wtMTguNzctMzQuMmM3LjI0LTUuNTYgMTEuOTItMTQuMjcgMTEuOTItMjQuMSAwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40LTE2Ljc5IDAtMzAuNCAxMy42MS0zMC40IDMwLjRzMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNHMzMC40LTEzLjYxIDMwLjQtMzAuNGMwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40eiIvPjxwYXRoIGQ9Im0yMjEuMDMgODYuODJjLTMuNjYgMC03LjE2LjY4LTEwLjQyIDEuODdsLTE4Ljc3LTM0LjJjNy4yNC01LjU2IDExLjkyLTE0LjI3IDExLjkyLTI0LjEgMC0xNi43OS0xMy42MS0zMC40LTMwLjQtMzAuNHMtMzAuNCAxMy42MS0zMC40IDMwLjQgMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNCAxNi43OSAwIDMwLjQtMTMuNjEgMzAuNC0zMC40IDAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PC9nPjwvc3ZnPg==);--lz:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE1NSIgdmlld0JveD0iMjAzIDAgMTU1IDE1NSIgd2lkdGg9IjE1NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzIwLjI0IDEzMS4yN2MtMjMuMjUgMTcuMTctNTQuOTQgMTcuMzMtNzguMzcuNDFsMy40Mi00LjcyYy0yMS41Ni0xNS40NS0zMC42Ni00My4wNC0yMi41Mi02OC4yN2w1LjU1IDEuMDVjNy42NS0yMi42IDI4LjktMzcuNzcgNTIuNzgtMzcuNjl2LTIyLjA1Yy0zMy42LjA0LTYzLjM1IDIxLjY5LTczLjcgNTMuNjNzMS4wNiA2Ni45MSAyOC4yNiA4Ni42MWMyNy4yIDE5LjcxIDY0IDE5LjY3IDkxLjE3LS4wOCAyNy4xNi0xOS43NiAzOC41MS01NC43NCAyOC4xLTg2LjY2bC01LjExIDEuNjZjOS44OSAyOS44LS42MSA2Mi41Ni0yNS45OSA4MS4wNyIvPjxwYXRoIGQ9Im0zMjAuMjQgMTMxLjI3Yy0yMy4yNSAxNy4xNy01NC45NCAxNy4zMy03OC4zNy40MWwzLjQyLTQuNzJjLTIxLjU2LTE1LjQ1LTMwLjY2LTQzLjA0LTIyLjUyLTY4LjI3bDUuNTUgMS4wNWM3LjY1LTIyLjYgMjguOS0zNy43NyA1Mi43OC0zNy42OXYtMjIuMDVjLTMzLjYuMDQtNjMuMzUgMjEuNjktNzMuNyA1My42M3MxLjA2IDY2LjkxIDI4LjI2IDg2LjYxYzI3LjIgMTkuNzEgNjQgMTkuNjcgOTEuMTctLjA4IDI3LjE2LTE5Ljc2IDM4LjUxLTU0Ljc0IDI4LjEtODYuNjZsLTUuMTEgMS42NmM5Ljg5IDI5LjgtLjYxIDYyLjU2LTI1Ljk5IDgxLjA3Ii8+PC9nPjwvc3ZnPg==);--ly:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiBuYW1lPSJJZ25pdGVhaUxvZ28iIHN0cm9rZS13aWR0aD0iMS44NzUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0xMS4wNjIxIDIuNTM0NTFjLjMyMjItLjg3MDYyIDEuNTUzNi0uODcwNjIgMS44NzU4IDBsMi4xNDM2IDUuNzkzMTZjLjEwMTMuMjczNzIuMzE3MS40ODk1My41OTA4LjU5MDgxbDUuNzkzMiAyLjE0MzYyYy44NzA2LjMyMjIuODcwNiAxLjU1MzYgMCAxLjg3NThsLTUuNzkzMiAyLjE0MzZjLS4yNzM3LjEwMTMtLjQ4OTUuMzE3MS0uNTkwOC41OTA4bC0yLjE0MzYgNS43OTMyYy0uMzIyMi44NzA2LTEuNTUzNi44NzA2LTEuODc1OCAwbC0yLjE0MzYxLTUuNzkzMmMtLjEwMTI5LS4yNzM3LS4zMTcxLS40ODk1LS41OTA4Mi0uNTkwOGwtNS43OTMxNi0yLjE0MzZjLS44NzA2Mi0uMzIyMi0uODcwNjItMS41NTM2IDAtMS44NzU4bDUuNzkzMTYtMi4xNDM2MWMuMjczNzItLjEwMTI5LjQ4OTUzLS4zMTcxLjU5MDgxLS41OTA4MnoiLz48cGF0aCBkPSJtMTkuNTMxMSAxLjI2NzI1Yy4xNjExLS40MzUzMDcuNzc2Ny0uNDM1MzA2LjkzNzggMGwuNjExNSAxLjY1MjM5IDEuNjUyMy42MTE0M2MuNDM1NC4xNjEwOC40MzU0Ljc3Njc4IDAgLjkzNzg2bC0xLjY1MjMuNjExNDMtLjYxMTUgMS42NTIzOWMtLjE2MTEuNDM1MzEtLjc3NjcuNDM1MzEtLjkzNzggMGwtLjYxMTUtMS42NTIzOS0xLjY1MjMtLjYxMTQzYy0uNDM1NC0uMTYxMDgtLjQzNTQtLjc3Njc4IDAtLjkzNzg2bDEuNjUyMy0uNjExNDN6Ii8+PC9nPjwvc3ZnPg==)}}@layer instui.elevation{:scope{--ki:0 .1875rem .375rem var(--ac), 0 .1875rem .375rem var(--ab)}}@layer instui.container{:is(:scope,[class*=instui]):is([data-layout=tooltipBlank],._pendo-guide-walkthrough_){& ._pendo-step-container-size{height:auto!important}& ._pendo-step-container-styles{border-radius:var(--hf)!important;border:var(--h) solid var(--he)!important;min-height:2.75rem!important;box-shadow:var(--ki)!important;margin-bottom:calc(4px + var(--ie))!important;margin-left:var(--ih)!important;margin-right:var(--ih)!important;margin-top:var(--ik)!important}& .pendo-tooltip-caret{--caret-color:var(--kf);&.pendo-tooltip-caret--top{border-top:16px solid var(--caret-color)!important;bottom:calc(4px + var(--ie) - 14px)!important;margin:0!important;&+.pendo-tooltip-caret-border{bottom:calc(4px + var(--ie) - 15px)!important;margin:0!important}}&.pendo-tooltip-caret--right{border-right-color:var(--caret-color)!important;margin:0 1rem 0 1px!important;left:-3px!important;&+.pendo-tooltip-caret-border{margin:0 1rem 0 1px!important;left:-4px!important}}&.pendo-tooltip-caret--bottom{border-bottom:16px solid var(--caret-color)!important;top:calc(var(--ik) - 14px)!important;margin:0!important;&+.pendo-tooltip-caret-border{top:calc(var(--ik) - 15px)!important;margin:0!important}}&.pendo-tooltip-caret--left{border-left-color:var(--caret-color)!important;margin:0 calc(1rem + 1px) 0 1px!important;right:-3px!important;&+.pendo-tooltip-caret-border{margin:0 calc(1rem + 1px) 0 1px!important;right:-4px!important}}}&[data-layout=tooltipBlank]{& ._pendo-step-container-styles{width:var(--pendo-overlay-width)!important;padding:var(--in)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles{width:auto!important;padding:var(--im) var(--im) var(--ij)!important;margin-bottom:var(--ih)!important}&:not(:has(._pendo-row)){& ._pendo-step-container-styles{padding-bottom:var(--in)!important}}}}:is(:scope,[class*=instui])[data-layout=lightboxBlank]:not([class*=instui-alert]) ._pendo-step-container-size{container:pantoken-pendo-guide/inline-size!important}:is(:scope,[class*=instui])[data-layout=lightboxBlank]:not([class*=instui-alert]){--_banner-close-button-reserve:0rem;--_banner-glyph:var(--lk);--_banner-icon-background:var(--dc);--_banner-icon-size:2rem;& ._pendo-step-container-styles{border:var(--cm) var(--cl) var(--cj)!important;border-radius:var(--ck)!important;height:auto!important;padding-block:var(--cy)!important;box-shadow:none!important;color:var(--cp)!important;background:var(--db)!important;margin:var(--op) 0!important;padding-inline-start:calc(var(--cx) + var(--_banner-icon-size) + var(--cv))!important;padding-inline-end:calc(var(--cx) + var(--_banner-close-button-reserve))!important;position:relative!important;overflow:hidden!important;&:before,&:after{content:""!important;inline-size:var(--_banner-icon-size)!important;block-size:var(--_banner-icon-size)!important;position:absolute!important;inset-block-start:var(--cy)!important;inset-inline-start:var(--cx)!important}&:before{border-radius:var(--cw)!important;background:var(--_banner-icon-background)!important}&:after{background:var(--cu)!important;mask:var(--_banner-glyph) center / 1.125rem no-repeat!important}&:has(>._pendo-close-guide){--_banner-close-button-reserve:calc(var(--dk) + var(--cn))}}&[class*=-sea]{--_banner-icon-background:var(--da);& ._pendo-step-container-styles{background:var(--cz)!important}}&[class*=-megaphone]{--_banner-glyph:var(--ll)}&[class*=-verified]{--_banner-glyph:var(--ln)}&[class*=-poll]{--_banner-glyph:var(--lm)}&[class*=-canvas]{--_banner-glyph:var(--lx)}&[class*=-parchment]{--_banner-glyph:var(--mb)}&[class*=-mastery]{--_banner-glyph:var(--ma)}&[class*=-learnplatform]{--_banner-glyph:var(--lz)}&[class*=-igniteai]{--_banner-glyph:var(--ly)}}@container pantoken-pendo-guide (width<=30em){:is(:scope,[class*=instui])[data-layout=lightboxBlank]:not([class*=instui-alert]){& ._pendo-step-container-styles{--_banner-icon-size:1.5rem;padding-block:var(--ct)!important;margin:var(--oq) 0!important;padding-inline-start:calc(var(--cs) + var(--_banner-icon-size) + var(--cq))!important;padding-inline-end:calc(var(--cs) + var(--_banner-close-button-reserve))!important;&:before,&:after{inset-block-start:var(--ct)!important;inset-inline-start:var(--cs)!important}&:before{border-radius:var(--cr)!important}}}}:scope[class*=instui-alert][data-layout=lightboxBlank]{&,&[class*=-info]{--_alert-color:var(--cg);--_alert-icon:var(--lj)}&[class*=-danger]{--_alert-color:var(--ce);--_alert-icon:var(--li)}&[class*=-success]{--_alert-color:var(--ch);--_alert-icon:var(--lh)}&[class*=-warning]{--_alert-color:var(--ci);--_alert-icon:var(--lo)}&,& ._pendo-step-container-size{margin-right:var(--pb)!important;margin-left:var(--pb)!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-size{z-index:300000!important;padding-bottom:calc(var(--ox))!important;padding-top:var(--oy)!important}& ._pendo-step-container-styles{border-color:var(--_alert-color)!important;border-width:var(--bz)!important;border-style:var(--by)!important;border-radius:var(--bx)!important;height:auto!important;padding:var(--cd) var(--cc) var(--cd) calc(var(--pendo-alert-indent) + var(--cc))!important;box-shadow:var(--ki)!important;margin-bottom:var(--ox)!important;margin-left:var(--ow)!important;margin-right:var(--ow)!important;margin-top:var(--pa)!important;position:relative!important;overflow:hidden!important;&:before{content:""!important;width:var(--pendo-alert-indent)!important;background-color:var(--_alert-color)!important;inset-block:0!important;display:block!important;position:absolute!important;left:0!important;overflow:hidden!important}&:after{content:""!important;top:50%!important;left:calc((var(--pendo-alert-indent) - var(--gi)) / 2)!important;width:var(--gi)!important;height:var(--gi)!important;mask-image:var(--_alert-icon)!important;background-color:var(--cf)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}}}@layer instui.card{._pendo-row{margin:var(--pendo-space-0) var(--pendo-space-0) var(--ij)!important;line-height:var(--pendo-space-0)!important;padding:var(--pendo-space-0)!important}[data-layout=lightboxBlank] ._pendo-row{margin-bottom:var(--if)!important}[data-layout=lightboxBlank]:not([class*=instui-alert]) ._pendo-row{margin-bottom:var(--ie)!important}@container pantoken-pendo-guide (width<=30em){[data-layout=lightboxBlank]:not([class*=instui-alert]) ._pendo-row{margin-bottom:var(--if)!important}}[id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--dh) + var(--fg))!important}[data-layout=lightboxBlank] [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--dh) + var(--fg) / 2)!important}.pendo-block-wrapper{margin:var(--pendo-space-0)!important}._pendo-text-paragraph._pendo-multi-choice-poll-question+._pendo-row .pendo-mock-flexbox-element,._pendo-multi-choice-poll-select-border,._pendo-multi-choice-poll-select{width:100%!important}[data-pendo-justify-content] .pendo-mock-flexbox-row{flex-wrap:wrap!important;align-items:center!important;min-height:0!important;display:flex!important}[data-pendo-justify-content] .pendo-mock-flexbox-row:has(._pendo-button){gap:var(--id)!important}[data-pendo-justify-content=flex-start] .pendo-mock-flexbox-row{justify-content:flex-start!important}[data-pendo-justify-content=center] .pendo-mock-flexbox-row{justify-content:center!important}[data-pendo-justify-content=flex-end] .pendo-mock-flexbox-row{justify-content:flex-end!important}[data-pendo-justify-content=space-between] .pendo-mock-flexbox-row{justify-content:space-between!important}[data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element{position:static!important}._pendo-step-container-styles{background-color:var(--kf)!important;color:var(--kh)!important;outline:var(--kt) var(--kr) var(--km)!important;outline-offset:0!important;transition:var(--ks)!important;&:focus-visible{outline-color:light-dark(var(--kj),var(--kl))!important;outline-offset:var(--kp)!important}}._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles>:is(div,form,textarea,h2):not(._pendo-row){margin:var(--pendo-space-0) auto var(--ij) auto!important;width:100%!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-styles>._pendo-row{max-width:var(--pendo-embedded-width)!important;margin-left:auto!important;margin-right:auto!important}}}@layer instui.text{._pendo-simple-text,[class*=_pendo-text-]{font-family:var(--jn)!important;font-weight:var(--jp)!important;font-size:var(--jo)!important;line-height:var(--jq)!important;letter-spacing:var(--kd)!important;color:var(--jg)!important;max-width:100%!important}._pendo-text-bold{font-weight:var(--jk)!important}._pendo-text-italic{font-family:var(--jj)!important;font-weight:var(--jk)!important;line-height:var(--jl)!important}._pendo-text-strike{text-decoration:line-through!important}h2:is(._pendo-simple-text,._pendo-text-title){font-weight:var(--ge)!important;font-family:var(--gc)!important;line-height:var(--gf)!important;font-size:var(--fv)!important}h3._pendo-simple-text{font-weight:var(--fw)!important;font-size:var(--gd)!important;font-family:var(--fu)!important;line-height:var(--fx)!important}:is(:scope[class*=instui-alert],[class*=instui-alert])[data-layout=lightboxBlank]{& h2._pendo-simple-text{font-size:var(--gd)!important;font-weight:var(--ge)!important;line-height:var(--gf)!important}& h3._pendo-simple-text{font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}[data-layout=tooltipBlank]{& h2._pendo-simple-text{font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}& h3._pendo-simple-text{font-size:var(--ky)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}._pendo-text-link{text-decoration:var(--gm)!important;font-weight:var(--gk)!important;border-radius:var(--hw)!important;color:var(--gl)!important;&:is(:hover,:active,:focus){color:var(--go)!important}&:disabled{color:var(--gn)!important}}._pendo-simple-text ol,._pendo-simple-text ul{padding-left:var(--pendo-space-0)!important}._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& :not(._pendo-close-guide){font-size:var(--fz)!important}&,& ._pendo-row:has(+._pendo-row>._pendo-button-primaryButton) ._pendo-simple-text:has(>span:not([class])),& .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),& h2._pendo-simple-text,& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{font-weight:var(--ga)!important;font-family:var(--fy)!important;font-size:var(--fz)!important;line-height:var(--gb)!important;margin:var(--pendo-space-0) var(--pendo-space-0) var(--ij)!important}& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{text-align:left!important}& h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text{text-align:center!important}& ._pendo-nps-poll-lowerbound-label,& ._pendo-nps-poll-upperbound-label{font-style:normal!important;font-size:var(--gr)!important;font-weight:var(--gs)!important;line-height:var(--lw)!important;text-align:center!important;color:var(--ke)!important}& .pendo-survey-wrapper label+div{font-size:var(--gr)!important;padding-top:var(--ik)!important;text-align:left!important}}:is(:scope,[class*=instui])[data-layout=lightboxBlank]:not([class*=instui-alert]){& :is(._pendo-simple-text,[class*=_pendo-text-]){font-size:var(--jh)!important;font-weight:var(--ji)!important;line-height:var(--jm)!important}& :is(h2._pendo-simple-text,h2._pendo-text-title){font-size:var(--gd)!important;font-weight:var(--ge)!important;line-height:var(--gf)!important}& h3._pendo-simple-text{font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}@container pantoken-pendo-guide (width<=30em){:is(:scope,[class*=instui])[data-layout=lightboxBlank]:not([class*=instui-alert]){& :is(._pendo-simple-text,[class*=_pendo-text-]){font-size:var(--jo)!important;font-weight:var(--jp)!important;line-height:var(--jq)!important}& :is(h2._pendo-simple-text,h2._pendo-text-title){font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}& h3._pendo-simple-text{font-size:var(--ky)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}}}@layer instui.chrome{[class*=pendo-video-wrapper]{aspect-ratio:16/9!important;height:auto!important;padding-bottom:0!important;position:relative!important;overflow:visible!important}._pendo-video{width:100%!important;height:100%!important;display:block!important}.pendo-mock-flexbox-element:has([class*=pendo-video-wrapper]){width:100%!important}._pendo-image{max-width:100%!important;height:auto!important}._pendo-backdrop{background-color:var(--gp)!important}.pendo-mock-flexbox-element:has(._pendo-divider){width:100%!important}hr{border-width:var(--io)!important;border-style:var(--kg)!important;margin:var(--ik) var(--pendo-space-0)!important;border-radius:var(--hv)!important;border-color:var(--ip)!important}._pendo-close-guide{height:var(--fg)!important;aspect-ratio:1!important;border-radius:var(--dd)!important;border-width:var(--pendo-space-0)!important;inset-inline:auto var(--ik)!important;color:var(--gg)!important;cursor:pointer!important;background-color:#0000!important;justify-content:center!important;align-items:center!important;padding:0!important;font-size:0!important;display:inline-flex!important;position:absolute!important;inset-block-start:var(--ik)!important;&:before{content:""!important;inline-size:var(--gj)!important;block-size:var(--gj)!important;mask:var(--lp) center / contain no-repeat!important;background:currentColor!important;transform:translateY(2px)!important}&:hover{background-color:var(--dy)!important}&:active{background-color:var(--dv)!important}&:disabled,&[aria-disabled=true]{color:var(--gh)!important;cursor:not-allowed!important}}[data-layout=lightboxBlank] ._pendo-close-guide{inset-block-start:var(--cb)!important;inset-inline-end:var(--ca)!important}:is(:scope,[class*=instui])[data-layout=lightboxBlank]:not([class*=instui-alert]) ._pendo-close-guide{inset-block-start:var(--co)!important;inset-inline-end:var(--cn)!important}}@layer instui.button{:is(:scope,[class*=instui]){& ._pendo-button{height:var(--fg)!important;min-height:var(--fg)!important;padding:var(--dl) var(--fh)!important;border-width:var(--h)!important;border-radius:var(--dd)!important;border-style:var(--de)!important;font-family:var(--df)!important;font-size:var(--ff)!important;font-weight:var(--dg)!important;line-height:var(--dj)!important;letter-spacing:var(--di)!important;cursor:pointer!important;margin:var(--pendo-space-0)!important;&:has(+._pendo-button){margin-inline-end:var(--id)!important}}& ._pendo-button-primaryButton,& ._pendo-button-custom{background:var(--n)!important;border-color:var(--ap)!important;color:var(--bk)!important;&:hover{background:var(--p)!important;border-color:var(--ar)!important}&:active{background:var(--m)!important;border-color:var(--ao)!important}&:disabled{background:var(--ds)!important;border-color:var(--dt)!important;color:var(--du)!important;cursor:not-allowed!important}}& ._pendo-button-secondaryButton{background:var(--eu)!important;border-color:var(--ev)!important;color:var(--ew)!important;&:hover{background:var(--fa)!important;border-color:var(--fb)!important;color:var(--fc)!important}&:active{background:var(--er)!important;border-color:var(--es)!important;color:var(--et)!important}&:disabled{background:var(--ex)!important;border-color:var(--ey)!important;color:var(--ez)!important;cursor:not-allowed!important}}& ._pendo-button-tertiaryButton{border-color:var(--dw)!important;color:var(--dx)!important;background:0 0!important;&:hover{background:var(--dy)!important;border-color:var(--fm)!important;color:var(--fn)!important}&:active{background:var(--dv)!important;border-color:var(--fi)!important;color:var(--fj)!important}&:disabled{border-color:var(--fk)!important;color:var(--fl)!important;cursor:not-allowed!important;background:0 0!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& div:has(>._pendo-button-primaryButton):not(:has(>:not(._pendo-button-primaryButton))){justify-content:center!important;display:flex!important}}}:is(:scope,[class*=instui])[data-layout=lightboxBlank]:not([class*=instui-alert]){& :is(._pendo-button-primaryButton,._pendo-button-custom){background:var(--ed)!important;border-color:var(--ee)!important;color:var(--ef)!important;&:hover{background:var(--ej)!important;border-color:var(--ep)!important;color:var(--eq)!important}&:active{background:var(--ec)!important;border-color:var(--ek)!important;color:var(--el)!important}&:is(:disabled,[aria-disabled=true]){background:var(--em)!important;border-color:var(--en)!important;color:var(--eo)!important;cursor:not-allowed!important}}& :is(._pendo-button-secondaryButton,._pendo-button-tertiaryButton){border-color:var(--eh)!important;color:light-dark(var(--ef),var(--eh))!important;background:0 0!important;&:focus{background:var(--ed)!important;border-color:var(--ee)!important;color:light-dark(var(--ef),var(--eh))!important}&:hover{background:var(--ei)!important;border-color:var(--ep)!important;color:light-dark(var(--eq),var(--eh))!important}&:active{background:var(--eg)!important;border-color:var(--fd)!important;color:light-dark(var(--el),var(--eh))!important}&:is(:disabled,[aria-disabled=true]){border-color:var(--fe)!important;color:light-dark(var(--eo),var(--eh))!important;cursor:not-allowed!important;background:0 0!important}}}}@layer instui.inputs{._pendo-row:has(._pendo-open-text-poll-input){height:auto!important}._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row{height:auto!important;min-height:unset!important}._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element{width:100%!important;position:static!important}._pendo-open-text-poll-input{border-radius:var(--iu)!important;border-width:var(--iv)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--jc)!important;gap:var(--iz)!important;min-height:var(--jb)!important;height:auto!important;max-height:var(--ja)!important;width:100%!important;font-family:var(--iw)!important;font-weight:var(--iy)!important;font-size:var(--ix)!important;line-height:var(--lv)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--iq)!important;color:var(--jf)!important;border-color:var(--is)!important;font-style:normal!important;&:hover{background:var(--ir)!important;border-color:var(--it)!important}&:focus{background-color:var(--iq)!important;border-color:var(--is)!important}&::placeholder{color:var(--jd)!important}&:hover::placeholder{color:var(--je)!important}}._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-open-text-poll-input{min-height:100px!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]){flex-direction:column!important;display:flex!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]) span:has(.pendo-radio){text-align:left!important;flex-direction:row!important;justify-content:start!important;align-items:center!important;display:flex!important}}._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select){padding:var(--pendo-space-0)!important;margin:var(--pendo-space-0)!important;background:0 0!important;border:0!important;position:relative!important;&:after{content:""!important;right:var(--kb)!important;top:var(--ig)!important;width:var(--gj)!important;height:var(--gj)!important;mask-image:var(--lf)!important;pointer-events:none!important;background-color:var(--kc)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}select._pendo-multi-choice-poll-select{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;height:var(--ka)!important;border-radius:var(--jv)!important;border-width:var(--jw)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--pendo-space-0) calc(var(--kb) + 24px) var(--pendo-space-0) var(--kb)!important;font-family:var(--jx)!important;font-weight:var(--jz)!important;font-size:var(--jy)!important;line-height:calc(var(--lv) * 2)!important;letter-spacing:normal!important;background-color:var(--jr)!important;color:var(--kc)!important;border-color:var(--jt)!important;font-style:normal!important;&:hover{background-color:var(--js)!important;border-color:var(--ju)!important}&:focus{background-color:var(--jr)!important}}select._pendo-multi-choice-poll-select option{font-family:var(--jx)!important;font-weight:var(--jz)!important;font-size:var(--jy)!important;background-color:var(--kf)!important;color:var(--jg)!important}@supports (appearance:base-select){._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select:open):after{mask-image:var(--lg)!important}select._pendo-multi-choice-poll-select,select._pendo-multi-choice-poll-select::picker(select){appearance:base-select!important}select._pendo-multi-choice-poll-select::picker-icon{display:none!important}select._pendo-multi-choice-poll-select::picker(select){border-radius:var(--hf)!important;border-width:var(--io)!important;padding:var(--pendo-space-0)!important;margin:var(--pendo-space-0)!important;background-color:var(--gt)!important;border-style:solid!important;border-color:var(--he)!important;box-shadow:var(--ki)!important;overflow:hidden!important}select._pendo-multi-choice-poll-select option{margin:var(--pendo-space-0)!important;font-family:var(--gv)!important;font-weight:var(--gw)!important;font-size:var(--ky)!important;letter-spacing:var(--kd)!important;cursor:pointer!important;line-height:var(--ha)!important;height:var(--oo)!important;background-color:var(--gt)!important;color:var(--gu)!important;border-radius:0!important;&::checkmark{display:none!important}&:hover,&:focus{background-color:var(--gy)!important;color:var(--gz)!important}&:focus{outline:none!important}&:checked{font-weight:var(--gx)!important;padding-right:calc(var(--hb) + var(--ov))!important;background-color:var(--hc)!important;color:var(--hd)!important;border-radius:0!important;position:relative!important;&:after{content:""!important;right:var(--hb)!important;width:var(--gj)!important;height:var(--gj)!important;mask-image:var(--le)!important;pointer-events:none!important;background-color:var(--hd)!important;display:block!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}&:hover{background-color:var(--gq)!important}}}}._pendo-multi-choice-poll-select-border label.pendo-radio,._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) label.pendo-radio{font-family:var(--ho)!important;font-weight:var(--hq)!important;font-size:var(--hp)!important;line-height:var(--hu)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--bw)!important;color:var(--hs)!important;font-style:normal!important;&:hover{color:var(--ht)!important}}._pendo-multi-choice-poll-select-border input.pendo-radio,._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) input.pendo-radio{width:var(--hn)!important;height:var(--hn)!important;border-radius:var(--hv)!important;border-width:var(--hl)!important;border-style:var(--pendo-input-border-style)!important;margin:var(--il) var(--hr) var(--pendo-space-0) var(--pendo-space-0)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-color:var(--hi)!important;background-color:var(--hg)!important;&:hover{background-color:var(--hh)!important;border-color:var(--hj)!important}&:checked{box-shadow:var(--hk) inset 0 0 0 var(--hm)!important;border-color:var(--hk)!important;&+label{background:var(--bw)!important;color:var(--hs)!important}}&:focus{&+label{outline:none!important}}}[class$=-poll-question]>._pendo-simple-text>._pendo-text-plain{font-family:var(--fo)!important;font-weight:var(--fq)!important;font-size:var(--fp)!important;line-height:var(--fs)!important;letter-spacing:normal!important;margin:var(--fr) var(--pendo-space-0)!important;color:var(--ft)!important;font-style:normal!important}._pendo-number-scale-poll-wrapper{padding:var(--pendo-space-0)!important}.pendo-survey-wrapper>div:has(input[type=radio]),._pendo-nps-poll-wrapper,[id*=survey-pmf-answers],[id*=survey-single-choice]{padding:var(--pendo-space-0) var(--pendo-space-0) var(--ig)!important;margin:var(--pendo-space-0)!important}._pendo-number-scale-poll-wrapper>div[role*=radiogroup],._pendo-nps-poll-wrapper>div[role*=radiogroup],.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio]){gap:var(--id)!important;flex-direction:row!important;width:fit-content!important;display:flex!important}.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span{position:relative!important}.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span>input[type=radio]{cursor:pointer!important;width:100%!important;height:100%!important;inset:0!important}._pendo-nps-poll-wrapper>div[role*=radiogroup]{justify-content:center!important;align-items:center!important;margin:0 auto!important}label.pendo-radio[class*=_pendo-number-scale-poll-],label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) label{height:var(--fg)!important;min-height:var(--fg)!important;width:var(--fg)!important;aspect-ratio:1!important;border-width:var(--h)!important;border-radius:var(--dd)!important;border-style:var(--de)!important;font-size:var(--ff)!important;line-height:var(--fg)!important;letter-spacing:var(--di)!important;font-family:var(--df)!important;font-weight:var(--dg)!important;text-align:center!important;margin:var(--pendo-space-0)!important;background:var(--eu)!important;border-color:var(--ev)!important;color:var(--ew)!important;outline:var(--kt) var(--kr) var(--km)!important;outline-offset:0!important;transition:var(--ks)!important;&:hover{background:var(--fa)!important;border-color:var(--fb)!important;color:var(--fc)!important}&:active{background:var(--er)!important;border-color:var(--es)!important;color:var(--et)!important}}label.pendo-radio[class*=_pendo-number-scale-poll-]+[class$=-description],.pendo-survey-wrapper>:not([id*=survey-single-choice]) label+div{width:var(--fg)!important;margin:var(--pendo-space-0)!important;font-weight:var(--gs)!important;line-height:var(--lw)!important;font-size:var(--gr)!important;color:var(--ke)!important}[class*=-wrapper]:last-child,.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(>span)>span:last-child{position:relative!important}[class*=-wrapper]:last-child>[class$=-description],.pendo-survey-wrapper div:not([id*=survey-single-choice]):has(>span):last-child>span:last-child>div{text-align:right!important;width:auto!important;position:absolute!important;right:0!important}._pendo-nps-poll-lowerbound-label,._pendo-nps-poll-upperbound-label{margin:var(--pendo-space-0)!important}input.pendo-radio:focus-visible+label.pendo-radio[class*=_pendo-number-scale-poll-],input.pendo-radio:focus-visible+label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:focus-visible+label.pendo-radio,.pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:focus-visible+label{outline-color:light-dark(var(--kj),var(--kl))!important;outline-offset:var(--kp)!important}input.pendo-radio:checked+label.pendo-radio[class*=_pendo-number-scale-poll-],input.pendo-radio:checked+label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:checked+label.pendo-radio,.pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:checked+label{background:var(--dp)!important;border-color:var(--dq)!important;color:var(--dr)!important;&:hover{background:var(--dz)!important;border-color:var(--ea)!important;color:var(--eb)!important}&:active{background:var(--dm)!important;border-color:var(--dn)!important;color:var(--do)!important}}[class$=-poll-question]+._pendo-row [class$=-description]{padding-top:var(--ik)!important;color:var(--ke)!important}}@layer instui.vars;@layer instui.focusOutline{:scope{--kj:var(--hy);--km:transparent;--kt:var(--ic);--kp:var(--hz);--kq:var(--d);--kr:solid;--ks:outline-color .2s, outline-offset .25s;--kn:var(--ib);--kk:var(--hx);--kl:var(--ia);--ko:0rem}:where(._pendo-button,._pendo-close-guide,._pendo-text-link,select._pendo-multi-choice-poll-select,._pendo-open-text-poll-input,input.pendo-radio){outline:var(--kt) var(--kr) var(--km)!important;outline-offset:0!important;transition:var(--ks)!important}:where(._pendo-button,._pendo-close-guide,._pendo-text-link,select._pendo-multi-choice-poll-select,._pendo-open-text-poll-input,input.pendo-radio):where(:focus-visible){outline-color:var(--kj)!important;outline-offset:var(--kp)!important;border-radius:var(--kq)!important}:where(.-focus-color-success):where(:focus-visible){outline-color:var(--kn)!important}:where(.-focus-color-danger):where(:focus-visible){outline-color:var(--kk)!important}:where(.-focus-color-inverse):where(:focus-visible){outline-color:var(--kl)!important}:where(.-focus-position-inset):where(:focus-visible){outline-offset:var(--ko)!important}:where(.-focus-within):where(:focus-within){outline-color:var(--kj)!important;outline-offset:var(--kp)!important;border-radius:var(--kq)!important}:where(.-without-focus-animation){transition:none!important}}}
+/*! @pantoken/pendo@0.4.0 */
+@scope([class*=instui]._pendo-step-container){:scope{--ns:#fff;--no:#0000;--mi:#03893d;--mj:#037d37;--mk:#f2f4f5;--mt:#dfe1e3;--mu:#aab0b5;--mv:#9ea6ad;--mw:#8d959f;--mx:#7e8792;--ml:#6a7883;--mm:#5f6e7a;--mn:#576773;--mo:#4a5b68;--mp:#334450;--mq:#273540;--mr:#1c222b;--ms:#171b21;--mf:#accdf7;--mg:#7fb4f1;--mh:#4798e3;--mc:#2b7abc;--md:#2369a4;--me:#1a5281;--nj:#e62429;--nk:#cf1f24;--ni:#cf4a00;--nr:#f3e5f7;--np:#9e58bd;--nq:#522965;--nn:#cff0f6;--nl:#00828e;--nm:#00424a;--mz:#eef4fd;--nf:#d5e2f6;--ng:#b6ccea;--nh:#86a8d5;--na:#2e5177;--nb:#234465;--nc:#213d5b;--nd:#1d354f;--ne:#061c30;--nt:#ffffff1a;--nu:#ffffffbf;--my:#1c222bbf;--ob:.0625rem;--of:.125rem;--oj:.25rem;--ol:.5rem;--oc:.75rem;--od:.875rem;--oe:1rem;--og:1.25rem;--oh:1.5rem;--oi:2rem;--ok:2.5rem;--nw:Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;--nv:Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif;--nz:400;--ny:500;--oa:600;--nx:700;--ls:150%;--lu:125%;--lq:125%;--lr:1.125rem;--kg:solid;--kd:0rem;--hv:999rem;--ii:0rem;--hm:.375rem;--gm:underline;--gj:1rem;--gi:1.25rem;--fv:1.5rem;--di:normal;--de:solid;--dl:.25rem;--cl:solid;--cj:#5f6e7a1a;--co:.5rem;--cn:.5rem;--by:solid;--ca:.5rem;--cb:.5rem;--le:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E);--lf:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E);--lg:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E);--lh:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E);--li:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E);--lj:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E);--lk:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22%2F%3E%3Cpath%20d%3D%22M9%2018h6%22%2F%3E%3Cpath%20d%3D%22M10%2022h4%22%2F%3E%3C%2Fsvg%3E);--ll:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%206a13%2013%200%200%200%208.4-2.8A1%201%200%200%201%2021%204v12a1%201%200%200%201-1.6.8A13%2013%200%200%200%2011%2014H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M6%2014a12%2012%200%200%200%202.4%207.2%202%202%200%200%200%203.2-2.4A8%208%200%200%201%2010%2014%22%2F%3E%3Cpath%20d%3D%22M8%206v8%22%2F%3E%3C%2Fsvg%3E);--lm:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.992%2016.342a2%202%200%200%201%20.094%201.167l-1.065%203.29a1%201%200%200%200%201.236%201.168l3.413-.998a2%202%200%200%201%201.099.092%2010%2010%200%201%200-4.777-4.719%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E);--ln:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E);--lo:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E);--lp:url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E)}@layer instui.tokens{:scope{--oo:var(--oi);--on:var(--ok);--om:var(--oh);--pb:var(--of);--pa:var(--oj);--oy:var(--ol);--ox:var(--oc);--ow:var(--oe);--oz:var(--oh);--oq:var(--oc);--op:var(--oe);--or:var(--ol);--ot:var(--ol);--os:var(--oe);--ov:var(--ol);--ou:var(--oc);--e:var(--oj);--d:var(--ol);--c:var(--oc);--a:var(--oe);--b:var(--oc);--h:var(--ob);--g:var(--of);--f:var(--ob);--kv:var(--nw);--ku:var(--nv);--la:var(--nz);--lb:var(--oa);--lc:var(--nx);--ld:var(--ny);--lt:var(--og);--lw:var(--oc);--lv:var(--oe);--kz:var(--oc);--ky:var(--od);--kw:var(--oe);--kx:var(--og);--aa:light-dark(var(--nr),var(--nq));--z:light-dark(var(--nn),var(--nm));--w:light-dark(var(--ns),var(--ms));--x:light-dark(var(--ns),var(--ms));--n:light-dark(var(--nd),var(--mz));--p:light-dark(var(--nb),var(--ns));--m:light-dark(var(--ne),var(--nf));--o:light-dark(var(--mt),var(--mp));--u:light-dark(var(--mt),var(--mp));--r:var(--ns);--t:var(--nf);--q:var(--ng);--s:var(--mw);--v:light-dark(var(--mz),var(--na));--l:var(--nt);--j:var(--np);--i:var(--nl);--k:light-dark(var(--ns),var(--ms));--y:light-dark(var(--nu),var(--my));--ak:light-dark(var(--mw),var(--ml));--bh:var(--mi);--al:var(--nj);--bi:var(--ni);--am:var(--mc);--bb:light-dark(var(--mc),var(--mh));--bc:var(--ns);--bd:light-dark(var(--mx),var(--mm));--be:light-dark(var(--mp),var(--mx));--bf:var(--mw);--bg:light-dark(var(--mr),var(--ns));--ap:light-dark(var(--nd),var(--mz));--ar:light-dark(var(--nb),var(--ns));--ao:light-dark(var(--ne),var(--nf));--aq:light-dark(var(--mt),var(--mp));--aw:light-dark(var(--mt),var(--mp));--an:var(--nk);--ba:var(--mj);--at:var(--ns);--av:var(--nf);--as:var(--ng);--au:var(--mw);--ay:var(--ns);--ax:var(--ng);--az:var(--mw);--bj:light-dark(var(--mq),var(--mk));--bv:light-dark(var(--mn),var(--mu));--br:light-dark(var(--mw),var(--mn));--bs:light-dark(var(--mp),var(--mv));--bt:light-dark(var(--mm),var(--mx));--bu:light-dark(var(--me),var(--mf));--bq:light-dark(var(--mv),var(--ml));--bk:light-dark(var(--ns),var(--nd));--bl:light-dark(var(--mv),var(--ml));--bn:var(--nc);--bp:var(--nc);--bm:var(--nc);--bo:var(--mo);--ae:var(--ns);--ad:light-dark(var(--mw),var(--mn));--ab:light-dark(#23446526,#0000004d);--ac:light-dark(#2344651a,#00000026);--bw:var(--no);--ai:light-dark(var(--mq),var(--ns));--aj:light-dark(var(--md),var(--mg));--af:light-dark(var(--nd),var(--mz));--ag:light-dark(var(--ns),var(--nd));--ah:light-dark(var(--nd),var(--ns));--kh:var(--ai);--kf:var(--k);--jr:var(--w);--js:var(--x);--jt:var(--bd);--ju:var(--be);--jv:var(--b);--jw:var(--f);--kc:var(--ai);--jx:var(--ku);--jz:var(--ld);--jy:var(--ky);--ka:var(--oo);--kb:var(--oy);--iq:var(--w);--ir:var(--x);--is:var(--bd);--it:var(--be);--iu:var(--b);--iv:var(--f);--jf:var(--ai);--jd:var(--bt);--je:var(--bs);--iw:var(--ku);--iy:var(--la);--ix:var(--ky);--iz:var(--ox);--jc:var(--ox);--ji:var(--la);--jh:var(--kw);--jm:var(--ls);--jj:var(--ku);--jk:var(--lb);--jl:var(--ls);--jn:var(--ku);--jp:var(--la);--jo:var(--ky);--jq:var(--ls);--jg:var(--ai);--ke:var(--bv);--ip:var(--ak);--hw:var(--e);--il:var(--pb);--ik:var(--pa);--ij:var(--oy);--ih:var(--ox);--ig:var(--ow);--id:var(--ox);--if:var(--oq);--ie:var(--op);--in:var(--ot);--im:var(--os);--hz:var(--pb);--ic:var(--g);--hy:var(--bb);--ia:var(--bc);--ib:var(--ba);--hx:var(--an);--io:var(--h);--hg:var(--w);--hh:var(--x);--hi:var(--bd);--hj:var(--bf);--hk:var(--bg);--hp:var(--ky);--hu:var(--lt);--ho:var(--ku);--hq:var(--la);--hr:var(--oy);--hl:var(--f);--hs:var(--ai);--ht:var(--ai);--hn:var(--om);--he:var(--ak);--hf:var(--c);--gt:var(--k);--gu:var(--ai);--gv:var(--ku);--gw:var(--la);--gx:var(--la);--gy:var(--v);--gz:var(--bj);--ha:var(--lu);--hb:var(--ox);--hc:var(--n);--hd:var(--bk);--gr:var(--kz);--gs:var(--la);--gq:var(--p);--gp:var(--y);--gl:var(--aj);--go:var(--bu);--gn:var(--br);--gk:var(--ld);--gg:var(--ai);--gh:var(--ad);--fu:var(--kv);--fw:var(--lc);--fx:var(--lq);--gc:var(--kv);--ge:var(--lc);--gd:var(--kx);--gf:var(--lq);--fy:var(--kv);--ga:var(--lc);--fz:var(--kw);--gb:var(--lq);--ft:var(--ai);--fo:var(--ku);--fq:var(--la);--fp:var(--kw);--fs:var(--lr);--fr:var(--or);--dm:var(--af);--dn:var(--af);--do:var(--ag);--dp:var(--af);--dq:var(--af);--dr:var(--ag);--ds:var(--o);--dt:var(--aq);--du:var(--bl);--dv:light-dark(#1d354f33,var(--l));--dw:light-dark(#1d354f66,var(--mz));--dx:light-dark(#1d354f,var(--mz));--dy:light-dark(#1d354f1a,var(--l));--dz:var(--af);--ea:var(--af);--eb:var(--ag);--ec:var(--q);--ed:var(--r);--ee:var(--at);--ef:var(--bn);--eg:var(--l);--eh:var(--ay);--ei:var(--l);--ej:var(--t);--ek:var(--as);--el:var(--bm);--em:var(--s);--en:var(--au);--eo:var(--bo);--ep:var(--av);--eq:var(--bp);--er:light-dark(#3d658f33,var(--nh));--es:light-dark(#44709f00,var(--nh));--et:var(--ah);--eu:light-dark(#44709f33,var(--nh));--ev:light-dark(#44709f00,var(--nh));--ew:var(--ah);--ex:var(--u);--ey:var(--aw);--ez:var(--bq);--fa:light-dark(#4d7eb333,var(--nh));--fb:light-dark(#44709f00,var(--nh));--fc:var(--ah);--fd:var(--ax);--fe:var(--az);--ff:var(--ky);--dk:var(--on);--fg:var(--oo);--fh:var(--ou);--dd:var(--b);--df:var(--ku);--dg:var(--ld);--dh:var(--pa);--fi:light-dark(#1d354f4d,var(--mz));--fj:light-dark(#1d354f,var(--mz));--fk:light-dark(#c7cacd,var(--mo));--fl:light-dark(#aab0b5,var(--mo));--fm:light-dark(#1d354f33,var(--mz));--fn:light-dark(#1d354f,var(--mz));--dj:var(--lu);--ck:var(--a);--cw:var(--c);--cr:var(--d);--cm:var(--h);--cp:var(--ai);--cu:var(--ae);--db:var(--aa);--dc:var(--j);--cz:var(--z);--da:var(--i);--cy:var(--oz);--cx:var(--oz);--cv:var(--ow);--cq:var(--oy);--cs:var(--ox);--ct:var(--ox);--bx:var(--c);--bz:var(--g);--ce:var(--al);--cf:var(--ae);--cg:var(--am);--ch:var(--bh);--ci:var(--bi);--cd:var(--ox);--cc:var(--oz);--pendo-embedded-width:59.25rem;--pendo-alert-indent:2.5rem;--pendo-overlay-width:22.5rem;--pendo-space-0:var(--ii);--pendo-input-border-style:solid;--jb:4rem;--ja:6rem;--lx:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjcxLjcxIDI3MS44IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0zOS40MiAxMzUuNjFjLS4wMi0xOS44My0xNC44MS0zNi41NC0zNC40OS0zOC45Ny02LjU4IDI1LjU2LTYuNTggNTIuMzcgMCA3Ny45MiAxOS42OC0yLjQyIDM0LjQ3LTE5LjEyIDM0LjQ5LTM4Ljk1Ii8+PHBhdGggZD0ibTYyLjI0IDEyMy4yOGMtNi44MSAwLTEyLjMzIDUuNTItMTIuMzMgMTIuMzNzNS41MiAxMi4zMyAxMi4zMyAxMi4zMyAxMi4zMy01LjUyIDEyLjMzLTEyLjMzYzAtNi44MS01LjUyLTEyLjMzLTEyLjMzLTEyLjMzeiIvPjxwYXRoIGQ9Im0yMzIuMjkgMTM1LjYxYy4wMSAxOS44MyAxNC44MSAzNi41MyAzNC40OSAzOC45NSA2LjU4LTI1LjU2IDYuNTgtNTIuMzcgMC03Ny45Mi0xOS42OCAyLjQ0LTM0LjQ2IDE5LjE0LTM0LjQ5IDM4Ljk3Ii8+PHBhdGggZD0ibTIwOS4zOSAxMjMuMjhjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAgMCAwLS4wMSAwLS4wMiAwLTYuOC01LjUxLTEyLjMyLTEyLjMxLTEyLjMzIi8+PHBhdGggZD0ibTEzNS41OSAyMzIuNGMtMTkuODIuMDItMzYuNTIgMTQuOC0zOC45NSAzNC40NiAyNS41NiA2LjU4IDUyLjM3IDYuNTggNzcuOTIgMC0yLjQzLTE5LjY4LTE5LjE0LTM0LjQ2LTM4Ljk3LTM0LjQ2Ii8+PHBhdGggZD0ibTEzNS42MSAxOTcuMjNjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAgMCAwLS4wMSAwLS4wMiAwLTYuOC01LjUxLTEyLjMyLTEyLjMxLTEyLjMzIi8+PHBhdGggZD0ibTEzNS42MSAzOS40YzE5LjgyIDAgMzYuNTMtMTQuNzkgMzguOTUtMzQuNDYtMjUuNTYtNi41OC01Mi4zNy02LjU4LTc3LjkyIDAgMi40NCAxOS42NyAxOS4xNSAzNC40NSAzOC45NyAzNC40NiIvPjxwYXRoIGQ9Im0xMzUuNjEgNDkuOTNjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAtLjAxIDAtLjAzIDAtLjA0IDAtNi44LTUuNTEtMTIuMzEtMTIuMzEtMTIuMzF6Ii8+PHBhdGggZD0ibTIwMy45MiAyMDMuOTJjLTEzLjk5IDE0LjAyLTE1LjM2IDM2LjI2LTMuMiA1MS45IDIyLjczLTEzLjQxIDQxLjY4LTMyLjM3IDU1LjA4LTU1LjEtMTUuNjMtMTIuMTYtMzcuODYtMTAuNzgtNTEuODggMy4yIi8+PHBhdGggZD0ibTE3OS4wNSAxNzkuMDVjLTQuODEgNC44MS00LjgxIDEyLjYyIDAgMTcuNDNzMTIuNjIgNC44MSAxNy40MyAwIDQuODEtMTIuNjIgMC0xNy40M2MtNC44Mi00LjgtMTIuNjItNC44LTE3LjQzIDAiLz48cGF0aCBkPSJtNjcuNSA2Ny41YzE0LjAxLTE0IDE1LjM5LTM2LjI2IDMuMi01MS44OC0yMi43MyAxMy40LTQxLjY4IDMyLjM1LTU1LjA4IDU1LjA4IDE1LjYyIDEyLjE4IDM3Ljg3IDEwLjgxIDUxLjg4LTMuMiIvPjxwYXRoIGQ9Im03NC45MyA3NC45NWMtNC44MSA0LjgxLTQuODEgMTIuNjIgMCAxNy40M3MxMi42MiA0LjgxIDE3LjQzIDAgNC44MS0xMi42MiAwLTE3LjQzYy00LjgyLTQuOC0xMi42Mi00LjgtMTcuNDMgMCIvPjxwYXRoIGQ9Im0yMDMuODMgNjcuMzdjMTQuMDMgMTMuOTggMzYuMjggMTUuMzMgNTEuOSAzLjE0LTEzLjQxLTIyLjcxLTMyLjM3LTQxLjY0LTU1LjEtNTUuMDItMTIuMTYgMTUuNjMtMTAuNzggMzcuODYgMy4yIDUxLjg4Ii8+PHBhdGggZD0ibTE5Ni40IDkyLjI0YzQuOC00LjgxIDQuOC0xMi42IDAtMTcuNC00LjgxLTQuOC0xMi42LTQuOC0xNy40IDAtNC44IDQuODEtNC44IDEyLjU5IDAgMTcuNHMxMi42IDQuODEgMTcuNCAweiIvPjxwYXRoIGQ9Im02Ny40MyAyMDMuNzdjLTE0LjAxLTEzLjk5LTM2LjI1LTE1LjM2LTUxLjg4LTMuMiAxMy40IDIyLjczIDMyLjM2IDQxLjY5IDU1LjA4IDU1LjEgMTIuMTgtMTUuNjMgMTAuOC0zNy44OC0zLjItNTEuOSIvPjxwYXRoIGQ9Im03NC43OCAxNzguOWMtNC44MSA0LjgxLTQuODEgMTIuNjIgMCAxNy40M3MxMi42MiA0LjgxIDE3LjQzIDAgNC44MS0xMi42MiAwLTE3LjQzYy00LjgyLTQuNzktMTIuNjEtNC43OS0xNy40MyAwIi8+PC9nPjwvc3ZnPg==);--mb:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUzLjAxIDE5Mi42IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0yMjYuMzIgMTU0LjQ4YzAgNy4zNi01Ljk3IDEzLjM2LTEzLjM2IDEzLjM2aC0xNzQuODRjLTcuMzYgMC0xMy4zNi01Ljk3LTEzLjM2LTEzLjM2di0xMTQuNDdjMC03LjM2IDUuOTctMTMuMzYgMTMuMzYtMTMuMzZoMTI3LjYxdi0yNC43NmgtMTMyLjY4Yy0xOC4yNiAwLTMzLjA1IDE0Ljc5LTMzLjA1IDMzLjAxdjEyNC42NWMwIDE4LjI2IDE0Ljc5IDMzLjA1IDMzLjA1IDMzLjA1aDE4NS4wNmMxOC4yNiAwIDMzLjA1LTE0Ljc5IDMzLjA1LTMzLjA1di03Mi4zMWgtMjQuNzZ2NjcuMmwtLjA3LjA0eiIvPjxwYXRoIGQ9Im0yMzguNzIgMjguNThjNy45IDAgMTQuMjktNi4zOSAxNC4yOS0xNC4yOXMtNi4zOS0xNC4yOS0xNC4yOS0xNC4yOS0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjl6Ii8+PHBhdGggZD0ibTE5Ni42NCAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5cy02LjM5LTE0LjI5LTE0LjI5LTE0LjI5LTE0LjI5IDYuMzktMTQuMjkgMTQuMjkgNi4zOSAxNC4yOSAxNC4yOSAxNC4yOXoiLz48cGF0aCBkPSJtMjM4LjcyIDQyLjA5Yy03LjkgMC0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5czYuMzkgMTQuMjkgMTQuMjkgMTQuMjkgMTQuMjktNi4zOSAxNC4yOS0xNC4yOS02LjM5LTE0LjI5LTE0LjI5LTE0LjI5eiIvPjxjaXJjbGUgY3g9Ijc0LjYiIGN5PSIxMTguMTgiIHI9IjI5LjYyIi8+PC9nPjwvc3ZnPg==);--ma:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUxLjQzIDE0Ny42MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzAuNCA4Ni44MmMtMTYuNzkgMC0zMC40IDEzLjYxLTMwLjQgMzAuNCAwIDE2Ljc5IDEzLjYxIDMwLjQgMzAuNCAzMC40czMwLjQtMTMuNjEgMzAuNC0zMC40YzAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PHBhdGggZD0ibTEyNS43MSA4Ni44MmMtMy42NiAwLTcuMTYuNjgtMTAuNDEgMS44N2wtMTguNzctMzQuMmM3LjI0LTUuNTYgMTEuOTItMTQuMjcgMTEuOTItMjQuMSAwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40LTE2Ljc5IDAtMzAuNCAxMy42MS0zMC40IDMwLjRzMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNHMzMC40LTEzLjYxIDMwLjQtMzAuNGMwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40eiIvPjxwYXRoIGQ9Im0yMjEuMDMgODYuODJjLTMuNjYgMC03LjE2LjY4LTEwLjQyIDEuODdsLTE4Ljc3LTM0LjJjNy4yNC01LjU2IDExLjkyLTE0LjI3IDExLjkyLTI0LjEgMC0xNi43OS0xMy42MS0zMC40LTMwLjQtMzAuNHMtMzAuNCAxMy42MS0zMC40IDMwLjQgMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNCAxNi43OSAwIDMwLjQtMTMuNjEgMzAuNC0zMC40IDAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PC9nPjwvc3ZnPg==);--lz:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE1NSIgdmlld0JveD0iMjAzIDAgMTU1IDE1NSIgd2lkdGg9IjE1NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzIwLjI0IDEzMS4yN2MtMjMuMjUgMTcuMTctNTQuOTQgMTcuMzMtNzguMzcuNDFsMy40Mi00LjcyYy0yMS41Ni0xNS40NS0zMC42Ni00My4wNC0yMi41Mi02OC4yN2w1LjU1IDEuMDVjNy42NS0yMi42IDI4LjktMzcuNzcgNTIuNzgtMzcuNjl2LTIyLjA1Yy0zMy42LjA0LTYzLjM1IDIxLjY5LTczLjcgNTMuNjNzMS4wNiA2Ni45MSAyOC4yNiA4Ni42MWMyNy4yIDE5LjcxIDY0IDE5LjY3IDkxLjE3LS4wOCAyNy4xNi0xOS43NiAzOC41MS01NC43NCAyOC4xLTg2LjY2bC01LjExIDEuNjZjOS44OSAyOS44LS42MSA2Mi41Ni0yNS45OSA4MS4wNyIvPjxwYXRoIGQ9Im0zMjAuMjQgMTMxLjI3Yy0yMy4yNSAxNy4xNy01NC45NCAxNy4zMy03OC4zNy40MWwzLjQyLTQuNzJjLTIxLjU2LTE1LjQ1LTMwLjY2LTQzLjA0LTIyLjUyLTY4LjI3bDUuNTUgMS4wNWM3LjY1LTIyLjYgMjguOS0zNy43NyA1Mi43OC0zNy42OXYtMjIuMDVjLTMzLjYuMDQtNjMuMzUgMjEuNjktNzMuNyA1My42M3MxLjA2IDY2LjkxIDI4LjI2IDg2LjYxYzI3LjIgMTkuNzEgNjQgMTkuNjcgOTEuMTctLjA4IDI3LjE2LTE5Ljc2IDM4LjUxLTU0Ljc0IDI4LjEtODYuNjZsLTUuMTEgMS42NmM5Ljg5IDI5LjgtLjYxIDYyLjU2LTI1Ljk5IDgxLjA3Ii8+PC9nPjwvc3ZnPg==);--ly:url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiBuYW1lPSJJZ25pdGVhaUxvZ28iIHN0cm9rZS13aWR0aD0iMS44NzUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0xMS4wNjIxIDIuNTM0NTFjLjMyMjItLjg3MDYyIDEuNTUzNi0uODcwNjIgMS44NzU4IDBsMi4xNDM2IDUuNzkzMTZjLjEwMTMuMjczNzIuMzE3MS40ODk1My41OTA4LjU5MDgxbDUuNzkzMiAyLjE0MzYyYy44NzA2LjMyMjIuODcwNiAxLjU1MzYgMCAxLjg3NThsLTUuNzkzMiAyLjE0MzZjLS4yNzM3LjEwMTMtLjQ4OTUuMzE3MS0uNTkwOC41OTA4bC0yLjE0MzYgNS43OTMyYy0uMzIyMi44NzA2LTEuNTUzNi44NzA2LTEuODc1OCAwbC0yLjE0MzYxLTUuNzkzMmMtLjEwMTI5LS4yNzM3LS4zMTcxLS40ODk1LS41OTA4Mi0uNTkwOGwtNS43OTMxNi0yLjE0MzZjLS44NzA2Mi0uMzIyMi0uODcwNjItMS41NTM2IDAtMS44NzU4bDUuNzkzMTYtMi4xNDM2MWMuMjczNzItLjEwMTI5LjQ4OTUzLS4zMTcxLjU5MDgxLS41OTA4MnoiLz48cGF0aCBkPSJtMTkuNTMxMSAxLjI2NzI1Yy4xNjExLS40MzUzMDcuNzc2Ny0uNDM1MzA2LjkzNzggMGwuNjExNSAxLjY1MjM5IDEuNjUyMy42MTE0M2MuNDM1NC4xNjEwOC40MzU0Ljc3Njc4IDAgLjkzNzg2bC0xLjY1MjMuNjExNDMtLjYxMTUgMS42NTIzOWMtLjE2MTEuNDM1MzEtLjc3NjcuNDM1MzEtLjkzNzggMGwtLjYxMTUtMS42NTIzOS0xLjY1MjMtLjYxMTQzYy0uNDM1NC0uMTYxMDgtLjQzNTQtLjc3Njc4IDAtLjkzNzg2bDEuNjUyMy0uNjExNDN6Ii8+PC9nPjwvc3ZnPg==)}}@layer instui.elevation{:scope{--ki:0 .1875rem .375rem var(--ac), 0 .1875rem .375rem var(--ab)}}@layer instui.container{:is(:scope,[class*=instui]):is([data-layout=tooltipBlank],._pendo-guide-walkthrough_){& ._pendo-step-container-size{height:auto!important}& ._pendo-step-container-styles{border-radius:var(--hf)!important;border:var(--h) solid var(--he)!important;min-height:2.75rem!important;box-shadow:var(--ki)!important;margin-bottom:calc(4px + var(--ie))!important;margin-left:var(--ih)!important;margin-right:var(--ih)!important;margin-top:var(--ik)!important}& .pendo-tooltip-caret{--caret-color:var(--kf);&.pendo-tooltip-caret--top{border-top:16px solid var(--caret-color)!important;bottom:calc(4px + var(--ie) - 14px)!important;margin:0!important;&+.pendo-tooltip-caret-border{bottom:calc(4px + var(--ie) - 15px)!important;margin:0!important}}&.pendo-tooltip-caret--right{border-right-color:var(--caret-color)!important;margin:0 1rem 0 1px!important;left:-3px!important;&+.pendo-tooltip-caret-border{margin:0 1rem 0 1px!important;left:-4px!important}}&.pendo-tooltip-caret--bottom{border-bottom:16px solid var(--caret-color)!important;top:calc(var(--ik) - 14px)!important;margin:0!important;&+.pendo-tooltip-caret-border{top:calc(var(--ik) - 15px)!important;margin:0!important}}&.pendo-tooltip-caret--left{border-left-color:var(--caret-color)!important;margin:0 calc(1rem + 1px) 0 1px!important;right:-3px!important;&+.pendo-tooltip-caret-border{margin:0 calc(1rem + 1px) 0 1px!important;right:-4px!important}}}&[data-layout=tooltipBlank]{& ._pendo-step-container-styles{width:var(--pendo-overlay-width)!important;padding:var(--in)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank],[class*=instui-banner]){& ._pendo-step-container-styles{width:auto!important;padding:var(--im) var(--im) var(--ij)!important;margin-bottom:var(--ih)!important}&:not(:has(._pendo-row)){& ._pendo-step-container-styles{padding-bottom:var(--in)!important}}}}:is(:scope,[class*=instui]):not([class*=instui-alert]):is([data-layout=lightboxBlank],[class*=instui-banner]) ._pendo-step-container-size{container:pantoken-pendo-guide/inline-size!important}:is(:scope,[class*=instui]):not([class*=instui-alert]):is([data-layout=lightboxBlank],[class*=instui-banner]){--_banner-close-button-reserve:0rem;--_banner-glyph:var(--lk);--_banner-icon-background:var(--dc);--_banner-icon-size:2rem;--_banner-shadow:none;&[class*=instui-banner]:not([data-layout=lightboxBlank]){--_banner-shadow:var(--ki)}&[data-layout=lightboxBlank] ._pendo-step-container-styles{margin:var(--op) 0!important}& ._pendo-step-container-styles{border:var(--cm) var(--cl) var(--cj)!important;border-radius:var(--ck)!important;height:auto!important;padding-block:var(--cy)!important;box-shadow:var(--_banner-shadow)!important;color:var(--cp)!important;background:var(--db)!important;padding-inline-start:calc(var(--cx) + var(--_banner-icon-size) + var(--cv))!important;padding-inline-end:calc(var(--cx) + var(--_banner-close-button-reserve))!important;position:relative!important;overflow:hidden!important;&:before,&:after{content:""!important;inline-size:var(--_banner-icon-size)!important;block-size:var(--_banner-icon-size)!important;position:absolute!important;inset-block-start:var(--cy)!important;inset-inline-start:var(--cx)!important}&:before{border-radius:var(--cw)!important;background:var(--_banner-icon-background)!important}&:after{background:var(--cu)!important;mask:var(--_banner-glyph) center / 1.125rem no-repeat!important}&:has(>._pendo-close-guide){--_banner-close-button-reserve:calc(var(--dk) + var(--cn))}}&[class*=-sea]{--_banner-icon-background:var(--da);& ._pendo-step-container-styles{background:var(--cz)!important}}&[class*=-megaphone]{--_banner-glyph:var(--ll)}&[class*=-verified]{--_banner-glyph:var(--ln)}&[class*=-checkmark]{--_banner-glyph:var(--le)}&[class*=-poll]{--_banner-glyph:var(--lm)}&[class*=-canvas]{--_banner-glyph:var(--lx)}&[class*=-parchment]{--_banner-glyph:var(--mb)}&[class*=-mastery]{--_banner-glyph:var(--ma)}&[class*=-learnplatform]{--_banner-glyph:var(--lz)}&[class*=-igniteai]{--_banner-glyph:var(--ly)}}@container pantoken-pendo-guide (width<=30em){:is(:scope,[class*=instui]):not([class*=instui-alert]):is([data-layout=lightboxBlank],[class*=instui-banner]){&[data-layout=lightboxBlank] ._pendo-step-container-styles{margin:var(--oq) 0!important}& ._pendo-step-container-styles{--_banner-icon-size:1.5rem;padding-block:var(--ct)!important;padding-inline-start:calc(var(--cs) + var(--_banner-icon-size) + var(--cq))!important;padding-inline-end:calc(var(--cs) + var(--_banner-close-button-reserve))!important;&:before,&:after{inset-block-start:var(--ct)!important;inset-inline-start:var(--cs)!important}&:before{border-radius:var(--cr)!important}}}}:scope[class*=instui-alert][data-layout=lightboxBlank]{&,&[class*=-info]{--_alert-color:var(--cg);--_alert-icon:var(--lj)}&[class*=-danger]{--_alert-color:var(--ce);--_alert-icon:var(--li)}&[class*=-success]{--_alert-color:var(--ch);--_alert-icon:var(--lh)}&[class*=-warning]{--_alert-color:var(--ci);--_alert-icon:var(--lo)}&,& ._pendo-step-container-size{margin-right:var(--pb)!important;margin-left:var(--pb)!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-size{z-index:300000!important;padding-bottom:calc(var(--ox))!important;padding-top:var(--oy)!important}& ._pendo-step-container-styles{border-color:var(--_alert-color)!important;border-width:var(--bz)!important;border-style:var(--by)!important;border-radius:var(--bx)!important;height:auto!important;padding:var(--cd) var(--cc) var(--cd) calc(var(--pendo-alert-indent) + var(--cc))!important;box-shadow:var(--ki)!important;margin-bottom:var(--ox)!important;margin-left:var(--ow)!important;margin-right:var(--ow)!important;margin-top:var(--pa)!important;position:relative!important;overflow:hidden!important;&:before{content:""!important;width:var(--pendo-alert-indent)!important;background-color:var(--_alert-color)!important;inset-block:0!important;display:block!important;position:absolute!important;left:0!important;overflow:hidden!important}&:after{content:""!important;top:50%!important;left:calc((var(--pendo-alert-indent) - var(--gi)) / 2)!important;width:var(--gi)!important;height:var(--gi)!important;mask-image:var(--_alert-icon)!important;background-color:var(--cf)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}}}@layer instui.card{._pendo-row{margin:var(--pendo-space-0) var(--pendo-space-0) var(--ij)!important;line-height:var(--pendo-space-0)!important;padding:var(--pendo-space-0)!important}[data-layout=lightboxBlank] ._pendo-row{margin-bottom:var(--if)!important}:is([data-layout=lightboxBlank],[class*=instui-banner]):not([class*=instui-alert]) ._pendo-row{margin-bottom:var(--ie)!important}@container pantoken-pendo-guide (width<=30em){:is([data-layout=lightboxBlank],[class*=instui-banner]):not([class*=instui-alert]) ._pendo-row{margin-bottom:var(--if)!important}}[id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--dh) + var(--fg))!important}[data-layout=lightboxBlank] [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--dh) + var(--fg) / 2)!important}.pendo-block-wrapper{margin:var(--pendo-space-0)!important}._pendo-text-paragraph._pendo-multi-choice-poll-question+._pendo-row .pendo-mock-flexbox-element,._pendo-multi-choice-poll-select-border,._pendo-multi-choice-poll-select{width:100%!important}[data-pendo-justify-content] .pendo-mock-flexbox-row{flex-wrap:wrap!important;align-items:center!important;min-height:0!important;display:flex!important}[data-pendo-justify-content] .pendo-mock-flexbox-row:has(._pendo-button){gap:var(--id)!important}[data-pendo-justify-content=flex-start] .pendo-mock-flexbox-row{justify-content:flex-start!important}[data-pendo-justify-content=center] .pendo-mock-flexbox-row{justify-content:center!important}[data-pendo-justify-content=flex-end] .pendo-mock-flexbox-row{justify-content:flex-end!important}[data-pendo-justify-content=space-between] .pendo-mock-flexbox-row{justify-content:space-between!important}[data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element{position:static!important}._pendo-step-container-styles{background-color:var(--kf)!important;color:var(--kh)!important;outline:var(--kt) var(--kr) var(--km)!important;outline-offset:0!important;transition:var(--ks)!important;&:focus-visible{outline-color:light-dark(var(--kj),var(--kl))!important;outline-offset:var(--kp)!important}}:is(:scope,[class*=instui])._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles>:is(div,form,textarea,h2):not(._pendo-row){margin:var(--pendo-space-0) auto var(--ij) auto!important;width:100%!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-styles>._pendo-row{max-width:var(--pendo-embedded-width)!important;margin-left:auto!important;margin-right:auto!important}& ._pendo-step-container-styles>:is(.pendo-survey-wrapper:first-child,._pendo-close-guide:first-child+.pendo-survey-wrapper)>:first-child{margin-block-start:var(--pendo-space-0)!important}}}@layer instui.text{._pendo-simple-text,[class*=_pendo-text-]{font-family:var(--jn)!important;font-weight:var(--jp)!important;font-size:var(--jo)!important;line-height:var(--jq)!important;letter-spacing:var(--kd)!important;color:var(--jg)!important;max-width:100%!important}._pendo-text-bold{font-weight:var(--jk)!important}._pendo-text-italic{font-family:var(--jj)!important;font-weight:var(--jk)!important;line-height:var(--jl)!important}._pendo-text-strike{text-decoration:line-through!important}h2:is(._pendo-simple-text,._pendo-text-title){font-weight:var(--ge)!important;font-family:var(--gc)!important;line-height:var(--gf)!important;font-size:var(--fv)!important}h3._pendo-simple-text{font-weight:var(--fw)!important;font-size:var(--gd)!important;font-family:var(--fu)!important;line-height:var(--fx)!important}:is(:scope[class*=instui-alert],[class*=instui-alert])[data-layout=lightboxBlank]{& h2._pendo-simple-text{font-size:var(--gd)!important;font-weight:var(--ge)!important;line-height:var(--gf)!important}& h3._pendo-simple-text{font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}[data-layout=tooltipBlank]{& h2._pendo-simple-text{font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}& h3._pendo-simple-text{font-size:var(--ky)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}._pendo-text-link{text-decoration:var(--gm)!important;font-weight:var(--gk)!important;border-radius:var(--hw)!important;color:var(--gl)!important;&:is(:hover,:active,:focus){color:var(--go)!important}&:disabled{color:var(--gn)!important}}._pendo-simple-text ol,._pendo-simple-text ul{padding-left:var(--pendo-space-0)!important}:is(:scope,[class*=instui])._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){&:not([class*=instui-banner]) :not(._pendo-close-guide){font-size:var(--fz)!important}&,& ._pendo-row:has(+._pendo-row>._pendo-button-primaryButton) ._pendo-simple-text:has(>span:not([class])),& .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),& h2._pendo-simple-text,& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{font-weight:var(--ga)!important;font-family:var(--fy)!important;font-size:var(--fz)!important;line-height:var(--gb)!important;margin:var(--pendo-space-0) var(--pendo-space-0) var(--ij)!important}& h2._pendo-text-title ._pendo-simple-text,& ._pendo-simple-text._pendo-nps-open-text-poll-question{text-align:left!important}& h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text{text-align:center!important}& ._pendo-nps-poll-lowerbound-label,& ._pendo-nps-poll-upperbound-label{font-style:normal!important;font-size:var(--gr)!important;font-weight:var(--gs)!important;line-height:var(--lw)!important;text-align:center!important;color:var(--ke)!important}& .pendo-survey-wrapper label+div{font-size:var(--gr)!important;padding-top:var(--ik)!important;text-align:left!important}}:is(:scope,[class*=instui]):not([class*=instui-alert]):is([data-layout=lightboxBlank],[class*=instui-banner]){& :is(._pendo-simple-text,[class*=_pendo-text-]){font-size:var(--jh)!important;font-weight:var(--ji)!important;line-height:var(--jm)!important}& :is(._pendo-text-bold,._pendo-text-italic){font-weight:var(--jk)!important}& :is(h2._pendo-simple-text,h2._pendo-text-title){font-size:var(--gd)!important;font-weight:var(--ge)!important;line-height:var(--gf)!important}& h3._pendo-simple-text{font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}@container pantoken-pendo-guide (width<=30em){:is(:scope,[class*=instui]):not([class*=instui-alert]):is([data-layout=lightboxBlank],[class*=instui-banner]){& :is(._pendo-simple-text,[class*=_pendo-text-]){font-size:var(--jo)!important;font-weight:var(--jp)!important;line-height:var(--jq)!important}& :is(._pendo-text-bold,._pendo-text-italic){font-weight:var(--jk)!important}& :is(h2._pendo-simple-text,h2._pendo-text-title){font-size:var(--fz)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}& h3._pendo-simple-text{font-size:var(--ky)!important;font-weight:var(--ga)!important;line-height:var(--gb)!important}}}}@layer instui.chrome{[class*=pendo-video-wrapper]{aspect-ratio:16/9!important;height:auto!important;padding-bottom:0!important;position:relative!important;overflow:visible!important}._pendo-video{width:100%!important;height:100%!important;display:block!important}.pendo-mock-flexbox-element:has([class*=pendo-video-wrapper]){width:100%!important}._pendo-image{max-width:100%!important;height:auto!important}._pendo-backdrop{background-color:var(--gp)!important}.pendo-mock-flexbox-element:has(._pendo-divider){width:100%!important}hr{border-width:var(--io)!important;border-style:var(--kg)!important;margin:var(--ik) var(--pendo-space-0)!important;border-radius:var(--hv)!important;border-color:var(--ip)!important}._pendo-close-guide{height:var(--fg)!important;aspect-ratio:1!important;border-radius:var(--dd)!important;border-width:var(--pendo-space-0)!important;inset-inline:auto var(--ik)!important;color:var(--gg)!important;cursor:pointer!important;background-color:#0000!important;justify-content:center!important;align-items:center!important;padding:0!important;font-size:0!important;display:inline-flex!important;position:absolute!important;inset-block-start:var(--ik)!important;&:before{content:""!important;inline-size:var(--gj)!important;block-size:var(--gj)!important;mask:var(--lp) center / contain no-repeat!important;background:currentColor!important;transform:translateY(2px)!important}&:hover{background-color:var(--dy)!important}&:active{background-color:var(--dv)!important}&:disabled,&[aria-disabled=true]{color:var(--gh)!important;cursor:not-allowed!important}}[data-layout=lightboxBlank] ._pendo-close-guide{inset-block-start:var(--cb)!important;inset-inline-end:var(--ca)!important}:is(:scope,[class*=instui]):not([class*=instui-alert]):is([data-layout=lightboxBlank],[class*=instui-banner]) ._pendo-close-guide{inset-block-start:var(--co)!important;inset-inline-end:var(--cn)!important}}@layer instui.button{:is(:scope,[class*=instui]){& ._pendo-button{height:var(--fg)!important;min-height:var(--fg)!important;padding:var(--dl) var(--fh)!important;border-width:var(--h)!important;border-radius:var(--dd)!important;border-style:var(--de)!important;font-family:var(--df)!important;font-size:var(--ff)!important;font-weight:var(--dg)!important;line-height:var(--dj)!important;letter-spacing:var(--di)!important;cursor:pointer!important;margin:var(--pendo-space-0)!important;&:has(+._pendo-button){margin-inline-end:var(--id)!important}}& ._pendo-button-primaryButton,& ._pendo-button-custom{background:var(--n)!important;border-color:var(--ap)!important;color:var(--bk)!important;&:hover{background:var(--p)!important;border-color:var(--ar)!important}&:active{background:var(--m)!important;border-color:var(--ao)!important}&:disabled{background:var(--ds)!important;border-color:var(--dt)!important;color:var(--du)!important;cursor:not-allowed!important}}& ._pendo-button-secondaryButton{background:var(--eu)!important;border-color:var(--ev)!important;color:var(--ew)!important;&:hover{background:var(--fa)!important;border-color:var(--fb)!important;color:var(--fc)!important}&:active{background:var(--er)!important;border-color:var(--es)!important;color:var(--et)!important}&:disabled{background:var(--ex)!important;border-color:var(--ey)!important;color:var(--ez)!important;cursor:not-allowed!important}}& ._pendo-button-tertiaryButton{border-color:var(--dw)!important;color:var(--dx)!important;background:0 0!important;&:hover{background:var(--dy)!important;border-color:var(--fm)!important;color:var(--fn)!important}&:active{background:var(--dv)!important;border-color:var(--fi)!important;color:var(--fj)!important}&:disabled{border-color:var(--fk)!important;color:var(--fl)!important;cursor:not-allowed!important;background:0 0!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& div:has(>._pendo-button-primaryButton):not(:has(>:not(._pendo-button-primaryButton))){justify-content:center!important;display:flex!important}}}:is(:scope,[class*=instui]):not([class*=instui-alert]):is([data-layout=lightboxBlank],[class*=instui-banner]){& :is(._pendo-button-primaryButton,._pendo-button-custom){background:var(--ed)!important;border-color:var(--ee)!important;color:var(--ef)!important;&:hover{background:var(--ej)!important;border-color:var(--ep)!important;color:var(--eq)!important}&:active{background:var(--ec)!important;border-color:var(--ek)!important;color:var(--el)!important}&:is(:disabled,[aria-disabled=true]){background:var(--em)!important;border-color:var(--en)!important;color:var(--eo)!important;cursor:not-allowed!important}}& :is(._pendo-button-secondaryButton,._pendo-button-tertiaryButton){border-color:var(--eh)!important;color:light-dark(var(--ef),var(--eh))!important;background:0 0!important;&:focus{background:var(--ed)!important;border-color:var(--ee)!important;color:light-dark(var(--ef),var(--eh))!important}&:hover{background:var(--ei)!important;border-color:var(--ep)!important;color:light-dark(var(--eq),var(--eh))!important}&:active{background:var(--eg)!important;border-color:var(--fd)!important;color:light-dark(var(--el),var(--eh))!important}&:is(:disabled,[aria-disabled=true]){border-color:var(--fe)!important;color:light-dark(var(--eo),var(--eh))!important;cursor:not-allowed!important;background:0 0!important}}}}@layer instui.inputs{._pendo-row:has(._pendo-open-text-poll-input){height:auto!important}._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row{height:auto!important;min-height:unset!important}._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element{width:100%!important;position:static!important}._pendo-open-text-poll-input{border-radius:var(--iu)!important;border-width:var(--iv)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--jc)!important;gap:var(--iz)!important;min-height:var(--jb)!important;height:auto!important;max-height:var(--ja)!important;width:100%!important;font-family:var(--iw)!important;font-weight:var(--iy)!important;font-size:var(--ix)!important;line-height:var(--lv)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--iq)!important;color:var(--jf)!important;border-color:var(--is)!important;font-style:normal!important;&:hover{background:var(--ir)!important;border-color:var(--it)!important}&:focus{background-color:var(--iq)!important;border-color:var(--is)!important}&::placeholder{color:var(--jd)!important}&:hover::placeholder{color:var(--je)!important}}:is(:scope,[class*=instui])._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-open-text-poll-input{min-height:100px!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]){flex-direction:column!important;display:flex!important}& :is([id*=survey-pmf-answers],[id*=survey-single-choice]) span:has(.pendo-radio){text-align:left!important;flex-direction:row!important;justify-content:start!important;align-items:center!important;display:flex!important}}._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select){padding:var(--pendo-space-0)!important;margin:var(--pendo-space-0)!important;background:0 0!important;border:0!important;position:relative!important;&:after{content:""!important;right:var(--kb)!important;top:var(--ig)!important;width:var(--gj)!important;height:var(--gj)!important;mask-image:var(--lf)!important;pointer-events:none!important;background-color:var(--kc)!important;display:block!important;position:absolute!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}}select._pendo-multi-choice-poll-select{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;height:var(--ka)!important;border-radius:var(--jv)!important;border-width:var(--jw)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--pendo-space-0) calc(var(--kb) + 24px) var(--pendo-space-0) var(--kb)!important;font-family:var(--jx)!important;font-weight:var(--jz)!important;font-size:var(--jy)!important;line-height:calc(var(--lv) * 2)!important;letter-spacing:normal!important;background-color:var(--jr)!important;color:var(--kc)!important;border-color:var(--jt)!important;font-style:normal!important;&:hover{background-color:var(--js)!important;border-color:var(--ju)!important}&:focus{background-color:var(--jr)!important}}select._pendo-multi-choice-poll-select option{font-family:var(--jx)!important;font-weight:var(--jz)!important;font-size:var(--jy)!important;background-color:var(--kf)!important;color:var(--jg)!important}@supports (appearance:base-select){._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select:open):after{mask-image:var(--lg)!important}select._pendo-multi-choice-poll-select,select._pendo-multi-choice-poll-select::picker(select){appearance:base-select!important}select._pendo-multi-choice-poll-select::picker-icon{display:none!important}select._pendo-multi-choice-poll-select::picker(select){border-radius:var(--hf)!important;border-width:var(--io)!important;padding:var(--pendo-space-0)!important;margin:var(--pendo-space-0)!important;background-color:var(--gt)!important;border-style:solid!important;border-color:var(--he)!important;box-shadow:var(--ki)!important;overflow:hidden!important}select._pendo-multi-choice-poll-select option{margin:var(--pendo-space-0)!important;font-family:var(--gv)!important;font-weight:var(--gw)!important;font-size:var(--ky)!important;letter-spacing:var(--kd)!important;cursor:pointer!important;line-height:var(--ha)!important;height:var(--oo)!important;background-color:var(--gt)!important;color:var(--gu)!important;border-radius:0!important;&::checkmark{display:none!important}&:hover,&:focus{background-color:var(--gy)!important;color:var(--gz)!important}&:focus{outline:none!important}&:checked{font-weight:var(--gx)!important;padding-right:calc(var(--hb) + var(--ov))!important;background-color:var(--hc)!important;color:var(--hd)!important;border-radius:0!important;position:relative!important;&:after{content:""!important;right:var(--hb)!important;width:var(--gj)!important;height:var(--gj)!important;mask-image:var(--le)!important;pointer-events:none!important;background-color:var(--hd)!important;display:block!important;position:absolute!important;top:50%!important;transform:translateY(-50%)!important;mask-position:50%!important;mask-size:contain!important;mask-repeat:no-repeat!important}&:hover{background-color:var(--gq)!important}}}}._pendo-multi-choice-poll-select-border label.pendo-radio,:is(:scope,[class*=instui])._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) label.pendo-radio{font-family:var(--ho)!important;font-weight:var(--hq)!important;font-size:var(--hp)!important;line-height:var(--hu)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--bw)!important;color:var(--hs)!important;font-style:normal!important;&:hover{color:var(--ht)!important}}._pendo-multi-choice-poll-select-border input.pendo-radio,:is(:scope,[class*=instui])._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]) :is([id*=survey-pmf-answers],[id*=survey-single-choice]) input.pendo-radio{width:var(--hn)!important;height:var(--hn)!important;border-radius:var(--hv)!important;border-width:var(--hl)!important;border-style:var(--pendo-input-border-style)!important;margin:var(--il) var(--hr) var(--pendo-space-0) var(--pendo-space-0)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-color:var(--hi)!important;background-color:var(--hg)!important;&:hover{background-color:var(--hh)!important;border-color:var(--hj)!important}&:checked{box-shadow:var(--hk) inset 0 0 0 var(--hm)!important;border-color:var(--hk)!important;&+label{background:var(--bw)!important;color:var(--hs)!important}}&:focus{&+label{outline:none!important}}}[class$=-poll-question]>._pendo-simple-text>._pendo-text-plain{font-family:var(--fo)!important;font-weight:var(--fq)!important;font-size:var(--fp)!important;line-height:var(--fs)!important;letter-spacing:normal!important;margin:var(--fr) var(--pendo-space-0)!important;color:var(--ft)!important;font-style:normal!important}._pendo-number-scale-poll-wrapper{padding:var(--pendo-space-0)!important}.pendo-survey-wrapper>div:has(input[type=radio]),._pendo-nps-poll-wrapper,[id*=survey-pmf-answers],[id*=survey-single-choice]{padding:var(--pendo-space-0) var(--pendo-space-0) var(--ig)!important;margin:var(--pendo-space-0)!important}._pendo-number-scale-poll-wrapper>div[role*=radiogroup],._pendo-nps-poll-wrapper>div[role*=radiogroup],.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio]){gap:var(--id)!important;flex-flow:wrap!important;width:fit-content!important;display:flex!important}.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span{position:relative!important}.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(input[type=radio])>span>input[type=radio]{cursor:pointer!important;width:100%!important;height:100%!important;inset:0!important}._pendo-nps-poll-wrapper>div[role*=radiogroup]{justify-content:center!important;align-items:center!important;margin:0 auto!important}label.pendo-radio[class*=_pendo-number-scale-poll-],label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) label{height:var(--fg)!important;min-height:var(--fg)!important;width:var(--fg)!important;aspect-ratio:1!important;border-width:var(--h)!important;border-radius:var(--dd)!important;border-style:var(--de)!important;font-size:var(--ff)!important;line-height:var(--fg)!important;letter-spacing:var(--di)!important;font-family:var(--df)!important;font-weight:var(--dg)!important;text-align:center!important;margin:var(--pendo-space-0)!important;background:var(--eu)!important;border-color:var(--ev)!important;color:var(--ew)!important;outline:var(--kt) var(--kr) var(--km)!important;outline-offset:0!important;transition:var(--ks)!important;&:hover{background:var(--fa)!important;border-color:var(--fb)!important;color:var(--fc)!important}&:active{background:var(--er)!important;border-color:var(--es)!important;color:var(--et)!important}}label.pendo-radio[class*=_pendo-number-scale-poll-]+[class$=-description],.pendo-survey-wrapper>:not([id*=survey-single-choice]) label+div{width:var(--fg)!important;margin:var(--pendo-space-0)!important;font-weight:var(--gs)!important;line-height:var(--lw)!important;font-size:var(--gr)!important;color:var(--ke)!important}[class*=-wrapper]:last-child,.pendo-survey-wrapper>div:not([id*=survey-single-choice]):has(>span)>span:last-child{position:relative!important}[class*=-wrapper]:last-child>[class$=-description],.pendo-survey-wrapper div:not([id*=survey-single-choice]):has(>span):last-child>span:last-child>div{text-align:right!important;width:auto!important;position:absolute!important;right:0!important}._pendo-nps-poll-lowerbound-label,._pendo-nps-poll-upperbound-label{margin:var(--pendo-space-0)!important}input.pendo-radio:focus-visible+label.pendo-radio[class*=_pendo-number-scale-poll-],input.pendo-radio:focus-visible+label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:focus-visible+label.pendo-radio,.pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:focus-visible+label{outline-color:light-dark(var(--kj),var(--kl))!important;outline-offset:var(--kp)!important}input.pendo-radio:checked+label.pendo-radio[class*=_pendo-number-scale-poll-],input.pendo-radio:checked+label.pendo-radio[class*=_pendo-nps-poll-],.pendo-survey-wrapper>:not([id*=survey-single-choice]) input.pendo-radio:checked+label.pendo-radio,.pendo-survey-wrapper>:not([id*=survey-single-choice]) input[type=radio]:checked+label{background:var(--dp)!important;border-color:var(--dq)!important;color:var(--dr)!important;&:hover{background:var(--dz)!important;border-color:var(--ea)!important;color:var(--eb)!important}&:active{background:var(--dm)!important;border-color:var(--dn)!important;color:var(--do)!important}}[class$=-poll-question]+._pendo-row [class$=-description]{padding-top:var(--ik)!important;color:var(--ke)!important}}@layer instui.vars;@layer instui.focusOutline{:scope{--kj:var(--hy);--km:transparent;--kt:var(--ic);--kp:var(--hz);--kq:var(--d);--kr:solid;--ks:outline-color .2s, outline-offset .25s;--kn:var(--ib);--kk:var(--hx);--kl:var(--ia);--ko:0rem}:where(._pendo-button,._pendo-close-guide,._pendo-text-link,select._pendo-multi-choice-poll-select,._pendo-open-text-poll-input,input.pendo-radio){outline:var(--kt) var(--kr) var(--km)!important;outline-offset:0!important;transition:var(--ks)!important}:where(._pendo-button,._pendo-close-guide,._pendo-text-link,select._pendo-multi-choice-poll-select,._pendo-open-text-poll-input,input.pendo-radio):where(:focus-visible){outline-color:var(--kj)!important;outline-offset:var(--kp)!important;border-radius:var(--kq)!important}:where(.-focus-color-success):where(:focus-visible){outline-color:var(--kn)!important}:where(.-focus-color-danger):where(:focus-visible){outline-color:var(--kk)!important}:where(.-focus-color-inverse):where(:focus-visible){outline-color:var(--kl)!important}:where(.-focus-position-inset):where(:focus-visible){outline-offset:var(--ko)!important}:where(.-focus-within):where(:focus-within){outline-color:var(--kj)!important;outline-offset:var(--kp)!important;border-radius:var(--kq)!important}:where(.-without-focus-animation){transition:none!important}}}

package/dist/index.mjs

@@ -4,12 +4,12 @@ import { elevationCss, focusOutlineDeclarations, focusOutlineRules } from "@pant
 import { byTheme } from "@pantoken/tokens";
 import { flattenProperty, mangleCustomProps, pruneCustomProps } from "@pantoken/plugin-props-minify";
 //#region generated/embedded.ts
-const buttonCss = "/**\n * @component pendo-button\n * @selector [class*=\"instui\"]\n * @summary Styles `._pendo-button` elements as InstUI BaseButton (small size).\n * @remarks Applies to all three layout types (tooltipBlank, lightboxBlank, surveys).\n *   In surveys, a lone primary button in its container is centred via a `:has()` rule.\n *   Adjacent button spacing belongs to the owning row wrapper, using the shared button-group gap.\n * @part ._pendo-button — Shared button base; always small-height.\n * @part ._pendo-button-primaryButton — Primary (filled) variant.\n * @part ._pendo-button-custom — Treated as primary; used when the guide author sets a custom colour.\n * @part ._pendo-button-secondaryButton — Secondary (outlined) variant.\n * @part ._pendo-button-tertiaryButton — Tertiary (ghost with border) variant.\n * @related pendo-inputs — Number-scale / NPS poll buttons in surveys, which adopt secondary/tertiary colours.\n * @related pendo-chrome — The dismiss button that shares the guide container.\n */\n\n:is(:scope, [class*=\"instui\"]) {\n  ._pendo-button {\n    height: var(--instui-component-base-button-small-height);\n    min-height: var(--instui-component-base-button-small-height);\n    padding: var(--instui-component-base-button-padding-vertical)\n      var(--instui-component-base-button-small-padding-horizontal);\n    border-width: var(--instui-border-width-sm);\n    border-radius: var(--instui-component-base-button-border-radius);\n    border-style: var(--instui-component-base-button-border-style);\n    font-family: var(--instui-component-base-button-font-family);\n    font-size: var(--instui-component-base-button-small-font-size);\n    font-weight: var(--instui-component-base-button-font-weight);\n    line-height: var(--instui-component-base-button-line-height);\n    letter-spacing: var(--instui-component-base-button-letter-spacing);\n    cursor: pointer;\n    margin: var(--pendo-space-0);\n\n    &:has(+ ._pendo-button) {\n      margin-inline-end: var(--instui-component-shared-tokens-spacing-gap-buttons);\n    }\n  }\n\n  /* Primary/Custom button variant */\n  ._pendo-button-primaryButton,\n  ._pendo-button-custom {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    border-color: var(--instui-color-stroke-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n\n    &:hover {\n      background: var(--instui-color-background-interactive-action-primary-hover);\n      border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n    }\n\n    &:active {\n      background: var(--instui-color-background-interactive-action-primary-active);\n      border-color: var(--instui-color-stroke-interactive-action-primary-active);\n    }\n\n    &:disabled {\n      background: var(--instui-component-base-button-primary-disabled-background-color);\n      border-color: var(--instui-component-base-button-primary-disabled-border-color);\n      color: var(--instui-component-base-button-primary-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  /* Secondary button variant */\n  ._pendo-button-secondaryButton {\n    background: var(--instui-component-base-button-secondary-background);\n    border-color: var(--instui-component-base-button-secondary-border-color);\n    color: var(--instui-component-base-button-secondary-color);\n\n    &:hover {\n      background: var(--instui-component-base-button-secondary-hover-background);\n      border-color: var(--instui-component-base-button-secondary-hover-border-color);\n      color: var(--instui-component-base-button-secondary-hover-text-color);\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-secondary-active-background);\n      border-color: var(--instui-component-base-button-secondary-active-border-color);\n      color: var(--instui-component-base-button-secondary-active-text-color);\n    }\n\n    &:disabled {\n      background: var(--instui-component-base-button-secondary-disabled-background-color);\n      border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n      color: var(--instui-component-base-button-secondary-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  /* Tertiary button variant */\n  ._pendo-button-tertiaryButton {\n    background: transparent;\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n    color: var(--instui-component-base-button-primary-ghost-color);\n\n    &:hover {\n      background: var(--instui-component-base-button-primary-ghost-hover-background);\n      border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n      color: var(--instui-component-base-button-tertiary-hover-text-color);\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-primary-ghost-active-background);\n      border-color: var(--instui-component-base-button-tertiary-active-border-color);\n      color: var(--instui-component-base-button-tertiary-active-text-color);\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n      color: var(--instui-component-base-button-tertiary-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  /* Surveys: Submit / Finish buttons */\n  &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n    /* Submit / Finish buttons: Center only if they're the only button in the container */\n    div:has(> ._pendo-button-primaryButton):not(:has(> :not(._pendo-button-primaryButton))) {\n      display: flex;\n      justify-content: center;\n    }\n  }\n}\n\n/* Banner buttons use the on-colour treatment from the InstUI banner component. */\n:is(:scope, [class*=\"instui\"])[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"]) {\n  :is(._pendo-button-primaryButton, ._pendo-button-custom) {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n    color: var(--instui-component-base-button-primary-inverse-color);\n\n    &:hover {\n      background: var(--instui-component-base-button-primary-inverse-hover-background);\n      border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n      color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-primary-inverse-active-background);\n      border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n      color: var(--instui-component-base-button-primary-on-color-active-text-color);\n    }\n\n    &:is(:disabled, [aria-disabled=\"true\"]) {\n      background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n      border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n      color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  :is(._pendo-button-secondaryButton, ._pendo-button-tertiaryButton) {\n    background: transparent;\n    border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n    color: light-dark(\n      var(--instui-component-base-button-primary-inverse-color),\n      var(--instui-component-base-button-primary-inverse-ghost-border-color)\n    );\n\n    &:focus {\n      background: var(--instui-component-base-button-primary-inverse-background);\n      border-color: var(--instui-component-base-button-primary-inverse-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-inverse-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n    }\n\n    &:hover {\n      background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n      border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-on-color-hover-text-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n      border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-on-color-active-text-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n    }\n\n    &:is(:disabled, [aria-disabled=\"true\"]) {\n      background: transparent;\n      border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-on-color-disabled-text-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n      cursor: not-allowed;\n    }\n  }\n}\n";
-const cardCss = "/**\n * @component pendo-card\n * @selector [class*=\"instui\"]\n * @summary Row spacing, content layout, and the shared card-container shell for all guide layouts.\n * @remarks Covers three concerns in one file:\n *   (1) `._pendo-row` margins, with per-layout overrides for close-button clearance;\n *   (2) Pendo's fake-flexbox replacement — Pendo uses `position:absolute` children inside\n *       `.pendo-mock-flexbox-row`, which collapses row height; this replaces it with real\n *       `display:flex` keyed off `data-pendo-justify-content`;\n *   (3) `._pendo-step-container-styles` base — background, text colour, and focus ring shared\n *       by both the alert and the popover layout cards.\n * @part ._pendo-row — A content row; spacing varies by layout type.\n * @part .pendo-block-wrapper — Wrapper around individual content blocks; margin is reset to zero.\n * @part [data-pendo-justify-content] — Row that Pendo has marked for flex alignment.\n * @part .pendo-mock-flexbox-row — Pendo's simulated flex container; replaced with real flexbox here.\n * @part .pendo-mock-flexbox-element — Individual flex children; `position:static` overrides Pendo's inline absolute.\n * @part ._pendo-step-container-styles — The visible card; background, colour, and focus-visible ring.\n * @related pendo-container — Container layouts (alert and popover) built on top of this card shell.\n * @related pendo-chrome — Close button whose height determines the row margin-right clearance.\n */\n\n/* Row spacing in Popover layout */\n._pendo-row {\n  margin: var(--pendo-space-0) var(--pendo-space-0)\n    var(--instui-component-shared-tokens-spacing-general-space-sm);\n  line-height: var(--pendo-space-0);\n  padding: var(--pendo-space-0);\n}\n\n/* Row spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] ._pendo-row {\n  margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n}\n\n[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"]) ._pendo-row {\n  margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-md);\n}\n\n/* Container is declared in container.css on the banner's ._pendo-step-container-size */\n@container pantoken-pendo-guide (max-width: 30em) {\n  [data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"]) ._pendo-row {\n    margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n  }\n}\n\n/* Close button spacing in Popover layout */\n[id*=\"guide-components\"] > :first-child ._pendo-row {\n  margin-right: calc(\n    var(--instui-component-base-button-gap-button-content-sm) +\n      var(--instui-component-base-button-small-height)\n  );\n}\n\n/* Close button spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] [id*=\"guide-components\"] > :first-child ._pendo-row {\n  margin-right: calc(\n    var(--instui-component-base-button-gap-button-content-sm) +\n      var(--instui-component-base-button-small-height) / 2\n  );\n}\n\n/* @TODO: Close button spacing in surveys */\n\n/* Content spacing */\n.pendo-block-wrapper {\n  margin: var(--pendo-space-0);\n}\n\n._pendo-text-paragraph._pendo-multi-choice-poll-question + ._pendo-row .pendo-mock-flexbox-element,\n._pendo-multi-choice-poll-select-border,\n._pendo-multi-choice-poll-select {\n  width: 100%;\n}\n\n/* Flexbox\n   * Pendo simulates flexbox with position:absolute on children, which collapses\n   * the row height. Replace it with real flexbox derived from the\n   * data-pendo-justify-content attribute so the row sizes to its content.\n   */\n[data-pendo-justify-content] .pendo-mock-flexbox-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 0;\n}\n\n[data-pendo-justify-content] .pendo-mock-flexbox-row:has(._pendo-button) {\n  gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n\n[data-pendo-justify-content=\"flex-start\"] .pendo-mock-flexbox-row {\n  justify-content: flex-start;\n}\n\n[data-pendo-justify-content=\"center\"] .pendo-mock-flexbox-row {\n  justify-content: center;\n}\n\n[data-pendo-justify-content=\"flex-end\"] .pendo-mock-flexbox-row {\n  justify-content: flex-end;\n}\n\n[data-pendo-justify-content=\"space-between\"] .pendo-mock-flexbox-row {\n  justify-content: space-between;\n}\n\n/* Reset the absolute positioning Pendo inlines on each child element */\n[data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element {\n  position: static;\n}\n\n/* Card container */\n._pendo-step-container-styles {\n  background-color: var(--instui-component-view-background-primary);\n  color: var(--instui-component-view-color);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color-start);\n  outline-offset: 0;\n  transition: var(--instui-focus-outline-transition);\n\n  &:focus-visible {\n    outline-color: light-dark(\n      var(--instui-focus-outline-color),\n      var(--instui-focus-outline-color-inverse)\n    );\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n}\n\n/* Surveys */\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n  /* Some surveys don't use `._pendo-row` for spacing, so add margin to direct children that aren't rows. */\n  ._pendo-step-container-styles > :is(div, form, textarea, h2):not(._pendo-row) {\n    margin: var(--pendo-space-0) auto var(--instui-component-shared-tokens-spacing-general-space-sm)\n      auto;\n    width: 100%;\n    max-width: var(--pendo-embedded-width);\n  }\n\n  ._pendo-step-container-styles > ._pendo-row {\n    max-width: var(--pendo-embedded-width);\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n";
-const chromeCss = "/**\n * @component pendo-chrome\n * @selector [class*=\"instui\"]\n * @summary Decorative guide content (backdrop, image, video, divider) and the close/dismiss button.\n * @remarks \"Chrome\" refers to structural content elements Pendo can insert into any guide layout.\n *   The backdrop display state (block/none) is set via inline style by Pendo's runtime.\n *   The close button is positioned absolutely inside `._pendo-step-container-styles`\n *   (`position:relative`); its inset values differ between the popover and alert layouts.\n * @part ._pendo-backdrop — Fixed full-viewport backdrop; background maps to the mask colour token.\n * @part ._pendo-image — Inline image; constrained to 100% container width.\n * @part [class*=\"pendo-video-wrapper\"] — Video embed wrapper; locked to 16/9 aspect ratio.\n * @part ._pendo-video — The video element inside the wrapper; fills 100%×100%.\n * @part hr — Divider rule; thin line using view-border and tab-panel tokens.\n * @part ._pendo-close-guide — Ghost dismiss button; absolute-positioned in the top-end corner of the card.\n * @related pendo-card — Provides `position:relative` on the card and close-button row margin-right clearance.\n * @related pendo-container — Provides the layout variant context for close-button positioning.\n */\n\n/* Video */\n[class*=\"pendo-video-wrapper\"] {\n  aspect-ratio: 16 / 9;\n  height: auto;\n  overflow: visible;\n  padding-bottom: 0;\n  position: relative;\n}\n\n._pendo-video {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.pendo-mock-flexbox-element:has([class*=\"pendo-video-wrapper\"]) {\n  width: 100%;\n}\n\n/* Image */\n._pendo-image {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Backdrop */\n._pendo-backdrop {\n  background-color: var(--instui-component-mask-background-color);\n}\n\n/* Divider */\n.pendo-mock-flexbox-element:has(._pendo-divider) {\n  width: 100%;\n}\n\nhr {\n  border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n  border-style: var(--instui-component-view-border-style);\n  margin: var(--instui-component-shared-tokens-spacing-general-space-xs) var(--pendo-space-0);\n  border-radius: var(--instui-component-shared-tokens-border-radius-full);\n  border-color: var(--instui-component-tabs-panel-border-color);\n}\n\n/* ─── Close button ─── */\n\n._pendo-close-guide {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  height: var(--instui-component-base-button-small-height);\n  aspect-ratio: 1;\n  border-radius: var(--instui-component-base-button-border-radius);\n  background-color: transparent;\n  border-width: var(--pendo-space-0);\n  position: absolute;\n  inset-inline: auto var(--instui-component-shared-tokens-spacing-general-space-xs);\n  inset-block-start: var(--instui-component-shared-tokens-spacing-general-space-xs);\n  font-size: 0;\n  color: var(--instui-component-icon-base-color);\n  cursor: pointer;\n\n  &::before {\n    content: \"\";\n    inline-size: var(--instui-component-icon-size-sm);\n    block-size: var(--instui-component-icon-size-sm);\n    background: currentColor;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n    transform: translateY(2px);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-base-button-primary-ghost-hover-background);\n  }\n\n  &:active {\n    background-color: var(--instui-component-base-button-primary-ghost-active-background);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-base-color);\n    cursor: not-allowed;\n  }\n}\n\n[data-layout=\"lightboxBlank\"] ._pendo-close-guide {\n  inset-block-start: var(--instui-component-alert-close-button-margin-top);\n  inset-inline-end: var(--instui-component-alert-close-button-margin-right);\n}\n\n:is(:scope, [class*=\"instui\"])[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"])\n  ._pendo-close-guide {\n  inset-block-start: var(--instui-component-banner-close-button-margin-top);\n  inset-inline-end: var(--instui-component-banner-close-button-margin-right);\n}\n";
-const containerCss = "/**\n * @component pendo-container\n * @selector [class*=\"instui\"]\n * @summary The guide container — shared root for all Pendo guide layout types.\n * @remarks The HTML is injected by Pendo and cannot be modified. The layout type is set via the\n *   `data-layout` attribute; the colour variant is set via the variant class in the Visual Design\n *   Studio. The `._pendo-step-container-size` and `._pendo-step-container-styles` elements are\n *   shared between all layouts; each layout applies its own sizing, spacing, and visual treatment.\n * @modifier [data-layout=\"lightboxBlank\"] alert — Embedded alert guide; full-width with a coloured sidebar strip and status icon.\n * @modifier [data-layout=\"tooltipBlank\"] popover — Overlay tooltip/popover guide; fixed width with optional caret.\n * @modifier ._pendo-guide-walkthrough_ survey — Survey guide; no data-layout value, auto width.\n * @modifier -info info — Informational colour variant (alert only).\n * @modifier -danger danger — Danger/error colour variant (alert only).\n * @modifier -success success — Success colour variant (alert only).\n * @modifier -warning warning — Warning colour variant (alert only).\n * @modifier instui banner — A `lightboxBlank` guide whose class contains `instui` is a violet banner by default.\n * @modifier -sea sea banner — Use the sea surface and icon swatch.\n * @modifier -megaphone megaphone — Replace the default lightbulb glyph with a megaphone.\n * @modifier -poll poll — Replace the default lightbulb glyph with a question-message glyph.\n * @modifier -canvas canvas — Replace the default lightbulb glyph with the reversed Canvas icon.\n * @modifier -parchment parchment — Replace the default lightbulb glyph with the reversed Parchment icon.\n * @modifier -mastery mastery — Replace the default lightbulb glyph with the reversed Mastery icon.\n * @modifier -learnplatform learnplatform — Replace the default lightbulb glyph with the reversed LearnPlatform icon.\n * @part ._pendo-guide-backdrop_ — Backdrop container.\n * @part ._pendo-backdrop — Fixed full-viewport overlay; display toggled by Pendo at runtime.\n * @part ._pendo-step-container-size — Positioning/sizing wrapper; stacks above the backdrop.\n * @part ._pendo-step-container-styles — The visible card dialog; styled per layout type.\n * @part .pendo-tooltip-caret — Caret fill triangle (popover/survey only); one of four directional variants.\n * @part .pendo-tooltip-caret-border — 1px-larger caret border layer drawn behind the fill (popover/survey only).\n * @pseudo ::before — Solid variant-coloured sidebar strip on `._pendo-step-container-styles` (alert only), flush with the rounded start edge.\n * @pseudo ::after — Status icon on `._pendo-step-container-styles` (alert only), masked and centred over the strip.\n * @cssproperty --_alert-color <color> — Private; the variant border/strip colour, set by the variant class.\n * @cssproperty --_alert-icon <url> — Private; the variant status icon, set by the variant class.\n * @cssproperty --caret-color <color> — Private; the caret fill colour (maps to `view-background-primary`).\n * @cssproperty --_banner-icon-background <color> — Private; the banner icon swatch colour.\n * @cssproperty --_banner-icon-size <length> — Private; the responsive banner icon swatch size.\n * @structure\n * [class*=\"instui\"] {\n *   ._pendo-guide-backdrop_ {\n *     ._pendo-backdrop:optional {}\n *   }\n *   ._pendo-step-container-size {\n *     ._pendo-step-container-styles {\n *       ::before:optional {}\n *       ::after:optional {}\n *     }\n *     .pendo-tooltip-caret:optional {}\n *     .pendo-tooltip-caret-border:optional {}\n *   }\n * }\n * @related pendo-card — Card shell, row layout, and focus ring applied to `._pendo-step-container-styles`.\n * @related pendo-chrome — Dismiss button and decorative elements; absolutely positioned inside `._pendo-step-container-styles`.\n */\n\n/* ─── Overlay guides and surveys ─── */\n\n:is(:scope, [class*=\"instui\"]):is([data-layout=\"tooltipBlank\"], ._pendo-guide-walkthrough_) {\n  ._pendo-step-container-size {\n    height: auto;\n  }\n\n  ._pendo-step-container-styles {\n    min-height: 2.75rem;\n    /* @TODO: overflow-y causes scrollbar to break border-radius */\n    /* 2x border radius + 2x caret size */\n    border-radius: var(--instui-component-popover-border-radius);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    box-shadow: var(--instui-elevation-above);\n    /* gap-cards-md + box-shadow y + box-shadow spread */\n    margin-bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md));\n    margin-left: var(--instui-component-shared-tokens-spacing-general-space-md);\n    margin-right: var(--instui-component-shared-tokens-spacing-general-space-md);\n    margin-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n  }\n\n  .pendo-tooltip-caret {\n    --caret-color: var(--instui-component-view-background-primary);\n\n    /* Pendo positions carets against _pendo-step-container-size, but our box\n     * carries margins (for box-shadow room + spacing), so the caret lands at the\n     * margin edge instead of touching the box. Pull each caret back toward the\n     * box by its margin so it sits flush (1px overlap under the border). The\n     * build adds !important, which overrides Pendo's dynamic inline offsets. */\n    &.pendo-tooltip-caret--top {\n      border-top: 16px solid var(--caret-color);\n      /* sits below the box: shift up by margin-bottom */\n      bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 14px);\n      margin: 0;\n\n      & + .pendo-tooltip-caret-border {\n        bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px);\n        margin: 0;\n      }\n    }\n\n    &.pendo-tooltip-caret--right {\n      border-right-color: var(--caret-color);\n      left: -3px;\n      margin: 0 1rem 0 1px;\n\n      & + .pendo-tooltip-caret-border {\n        left: -4px;\n        margin: 0 1rem 0 1px;\n      }\n    }\n\n    &.pendo-tooltip-caret--bottom {\n      border-bottom: 16px solid var(--caret-color);\n      /* sits above the box: shift down by margin-top */\n      top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 14px);\n      margin: 0;\n\n      & + .pendo-tooltip-caret-border {\n        top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px);\n        margin: 0;\n      }\n    }\n\n    &.pendo-tooltip-caret--left {\n      border-left-color: var(--caret-color);\n      right: -3px;\n      margin: 0 calc(1rem + 1px) 0 1px;\n\n      & + .pendo-tooltip-caret-border {\n        right: -4px;\n        margin: 0 calc(1rem + 1px) 0 1px;\n      }\n    }\n  }\n\n  /* Overlay Guides */\n  &[data-layout=\"tooltipBlank\"] {\n    ._pendo-step-container-styles {\n      width: var(--pendo-overlay-width);\n      padding: var(--instui-component-shared-tokens-spacing-padding-card-sm);\n    }\n  }\n\n  /* Surveys */\n  &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n    ._pendo-step-container-styles {\n      width: auto;\n      padding: var(--instui-component-shared-tokens-spacing-padding-card-lg)\n        var(--instui-component-shared-tokens-spacing-padding-card-lg)\n        var(--instui-component-shared-tokens-spacing-general-space-sm);\n      /* Cuts off box-shadow, but Surveys are anchored to bottom of viewport */\n      margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-md);\n    }\n\n    &:not(:has(._pendo-row)) {\n      ._pendo-step-container-styles {\n        padding-bottom: var(--instui-component-shared-tokens-spacing-padding-card-sm);\n      }\n    }\n  }\n}\n\n/* ─── Banners ─── */\n\n:is(:scope, [class*=\"instui\"])[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"])\n  ._pendo-step-container-size {\n  container: pantoken-pendo-guide / inline-size;\n}\n\n:is(:scope, [class*=\"instui\"])[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"]) {\n  --_banner-close-button-reserve: 0rem;\n  --_banner-glyph: var(--instui-icon-lightbulb);\n  --_banner-icon-background: var(--instui-component-banner-violet-icon-background);\n  --_banner-icon-size: 2rem;\n\n  ._pendo-step-container-styles {\n    position: relative;\n    height: auto;\n    overflow: hidden;\n    border: var(--instui-component-banner-border-width) var(--instui-component-banner-border-style)\n      var(--instui-component-banner-border-color);\n    border-radius: var(--instui-component-banner-border-radius);\n    padding-block: var(--instui-component-banner-relaxed-padding-vertical);\n    padding-inline-start: calc(\n      var(--instui-component-banner-relaxed-padding-horizontal) + var(--_banner-icon-size) +\n        var(--instui-component-banner-relaxed-content-gap-horizontal)\n    );\n    padding-inline-end: calc(\n      var(--instui-component-banner-relaxed-padding-horizontal) +\n        var(--_banner-close-button-reserve)\n    );\n    box-shadow: none;\n    color: var(--instui-component-banner-color);\n    background: var(--instui-component-banner-violet-background);\n    margin: var(--instui-spacing-gap-cards-md) 0;\n\n    &::before,\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset-block-start: var(--instui-component-banner-relaxed-padding-vertical);\n      inset-inline-start: var(--instui-component-banner-relaxed-padding-horizontal);\n      inline-size: var(--_banner-icon-size);\n      block-size: var(--_banner-icon-size);\n    }\n\n    &::before {\n      border-radius: var(--instui-component-banner-relaxed-icon-border-radius);\n      background: var(--_banner-icon-background);\n    }\n\n    &::after {\n      background: var(--instui-component-banner-icon-color);\n      mask: var(--_banner-glyph) center / 1.125rem no-repeat;\n    }\n\n    &:has(> ._pendo-close-guide) {\n      --_banner-close-button-reserve: calc(\n        var(--instui-component-base-button-medium-height) +\n          var(--instui-component-banner-close-button-margin-right)\n      );\n    }\n  }\n\n  &[class*=\"-sea\"] {\n    --_banner-icon-background: var(--instui-component-banner-sea-icon-background);\n\n    ._pendo-step-container-styles {\n      background: var(--instui-component-banner-sea-background);\n    }\n  }\n\n  &[class*=\"-megaphone\"] {\n    --_banner-glyph: var(--instui-icon-megaphone);\n  }\n\n  &[class*=\"-verified\"] {\n    --_banner-glyph: var(--instui-icon-shield-check);\n  }\n\n  &[class*=\"-poll\"] {\n    --_banner-glyph: var(--instui-icon-message-circle-question-mark);\n  }\n\n  &[class*=\"-canvas\"] {\n    --_banner-glyph: var(--instui-logo-canvas-icon-reversed);\n  }\n\n  &[class*=\"-parchment\"] {\n    --_banner-glyph: var(--instui-logo-parchment-icon-reversed);\n  }\n\n  &[class*=\"-mastery\"] {\n    --_banner-glyph: var(--instui-logo-mastery-icon-reversed);\n  }\n\n  &[class*=\"-learnplatform\"] {\n    --_banner-glyph: var(--instui-logo-learnplatform-icon-reversed);\n  }\n\n  &[class*=\"-igniteai\"] {\n    --_banner-glyph: var(--instui-logo-igniteai-icon-reversed);\n  }\n}\n\n@container pantoken-pendo-guide (max-width: 30em) {\n  :is(:scope, [class*=\"instui\"])[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"]) {\n    ._pendo-step-container-styles {\n      --_banner-icon-size: 1.5rem;\n      padding-block: var(--instui-component-banner-compact-padding-vertical);\n      padding-inline-start: calc(\n        var(--instui-component-banner-compact-padding-horizontal) + var(--_banner-icon-size) +\n          var(--instui-component-banner-compact-content-gap-horizontal)\n      );\n      padding-inline-end: calc(\n        var(--instui-component-banner-compact-padding-horizontal) +\n          var(--_banner-close-button-reserve)\n      );\n      margin: var(--instui-spacing-gap-cards-sm) 0;\n\n      &::before,\n      &::after {\n        inset-block-start: var(--instui-component-banner-compact-padding-vertical);\n        inset-inline-start: var(--instui-component-banner-compact-padding-horizontal);\n      }\n\n      &::before {\n        border-radius: var(--instui-component-banner-compact-icon-border-radius);\n      }\n    }\n  }\n}\n\n/* ─── Embedded alert ─── */\n\n:scope[class*=\"instui-alert\"][data-layout=\"lightboxBlank\"] {\n  /* Variant tokens — set on the container, inherited by all children */\n  &,\n  &[class*=\"-info\"] {\n    --_alert-color: var(--instui-component-alert-info-border-color);\n    --_alert-icon: var(--instui-icon-info);\n  }\n\n  &[class*=\"-danger\"] {\n    --_alert-color: var(--instui-component-alert-danger-border-color);\n    --_alert-icon: var(--instui-icon-circle-x);\n  }\n\n  &[class*=\"-success\"] {\n    --_alert-color: var(--instui-component-alert-success-border-color);\n    --_alert-icon: var(--instui-icon-circle-check);\n  }\n\n  &[class*=\"-warning\"] {\n    --_alert-color: var(--instui-component-alert-warning-border-color);\n    --_alert-icon: var(--instui-icon-triangle-alert);\n  }\n\n  &,\n  ._pendo-step-container-size {\n    margin-right: var(--instui-spacing-space2xs);\n    margin-left: var(--instui-spacing-space2xs);\n    max-width: var(--pendo-embedded-width);\n  }\n\n  ._pendo-step-container-size {\n    /* Stack above the fixed backdrop (z-index: 200000) the same way the overlay guide does */\n    z-index: 300000;\n    /* prevent margin collapse from sibling content to preserve drop shadow */\n    padding-bottom: calc(var(--instui-spacing-space-md));\n    padding-top: var(--instui-spacing-space-sm);\n  }\n\n  ._pendo-step-container-styles {\n    height: auto;\n    border-color: var(--_alert-color);\n    border-width: var(--instui-component-alert-border-width);\n    border-style: var(--instui-component-alert-border-style);\n    border-radius: var(--instui-component-alert-border-radius);\n    overflow: hidden;\n    padding: var(--instui-component-alert-content-padding-vertical)\n      var(--instui-component-alert-content-padding-horizontal)\n      var(--instui-component-alert-content-padding-vertical)\n      calc(var(--pendo-alert-indent) + var(--instui-component-alert-content-padding-horizontal));\n    box-shadow: var(--instui-elevation-above);\n    position: relative;\n    /* gap-cards-md + box-shadow y + box-shadow spread */\n    margin-bottom: var(--instui-spacing-space-md);\n    margin-left: var(--instui-spacing-space-lg);\n    margin-right: var(--instui-spacing-space-lg);\n    margin-top: var(--instui-spacing-space-xs);\n\n    /* Colored sidebar strip — clipped to border-radius by overflow: hidden */\n    &::before {\n      content: \"\";\n      display: block;\n      position: absolute;\n      overflow: hidden;\n      inset-block: 0;\n      left: 0;\n      width: var(--pendo-alert-indent);\n      background-color: var(--_alert-color);\n    }\n\n    /* Icon centered in the sidebar strip */\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: calc((var(--pendo-alert-indent) - var(--instui-component-icon-size-md)) / 2);\n      width: var(--instui-component-icon-size-md);\n      height: var(--instui-component-icon-size-md);\n      mask-image: var(--_alert-icon);\n      mask-size: contain;\n      mask-repeat: no-repeat;\n      mask-position: center;\n      background-color: var(--instui-component-alert-icon-color);\n    }\n  }\n}\n";
-const inputsCss = "/**\n * @component pendo-inputs\n * @selector [class*=\"instui\"]\n * @summary All Pendo survey form input controls: open-text textarea, dropdown select, radio groups, and number-scale/NPS buttons.\n * @remarks Four input types in one layer:\n *   (1) Textarea — `._pendo-open-text-poll-input`; full-width with auto height between min/max.\n *   (2) Select — `._pendo-multi-choice-poll-select`; custom-appearance dropdown with chevron icon; opts\n *       into Chromium's base-select model under `@supports (appearance: base-select)`.\n *   (3) Radio group — `label.pendo-radio` + `input.pendo-radio`; used for single-choice and PMF surveys.\n *   (4) Number-scale / NPS — `input[type=\"radio\"]` + `label` pairs styled as small square buttons\n *       (secondary unselected, primary selected); also covers UX-Lite and CSAT surveys.\n * @part ._pendo-open-text-poll-input — Open-text textarea; full-width with auto height.\n * @part ._pendo-multi-choice-poll-select-border — Select wrapper; supplies the chevron via `::after`.\n * @part select._pendo-multi-choice-poll-select — The `<select>` element.\n * @part select._pendo-multi-choice-poll-select option select-option — The dropdown options (via `::picker(select)` in Chromium base-select mode).\n * @part label.pendo-radio radio-label — Radio label; maps to `instui-component-radio-input` tokens in groups, or button tokens in scale polls.\n * @part input.pendo-radio radio-input — Radio control; custom appearance.\n * @part input[type=\"radio\"] radio — Hidden radio in scale polls; stretched to cover container for click area.\n * @part ._pendo-number-scale-poll-wrapper — Number-scale poll wrapper.\n * @part ._pendo-nps-poll-wrapper — NPS (0–10) poll wrapper.\n * @part .pendo-survey-wrapper — Generic survey wrapper.\n * @part [class$=\"-description\"] — Scale endpoint description label.\n * @part [class$=\"-poll-question\"] poll-label — Form-field label container above a poll group.\n * @pseudo ::after — Chevron-down icon on the select wrapper (base-select); check icon on selected option (base-select only).\n * @pseudo ::placeholder — Placeholder text colour on textarea.\n * @pseudo ::picker(select) — Chromium only: customizable dropdown panel for `base-select` (appearance: base-select).\n * @pseudo ::picker-icon — Chromium only: browser-generated picker icon (hidden via `display: none`).\n * @pseudo ::checkmark — Chromium only: check mark icon on selected option (hidden for custom implementation).\n * @related pendo-button — Standard CTA buttons using the same button tokens.\n * @related pendo-card — Provides the row/flexbox context that inputs live in.\n * @related pendo-vars — Defines textarea min/max-height local tokens.\n */\n\n/* ─── Textarea ─── */\n\n._pendo-row:has(._pendo-open-text-poll-input) {\n  height: auto;\n}\n\n._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row {\n  height: auto;\n  min-height: unset;\n}\n\n._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element {\n  position: static;\n  width: 100%;\n}\n\n._pendo-open-text-poll-input {\n  border-radius: var(--instui-component-text-area-border-radius);\n  border-width: var(--instui-component-text-area-border-width);\n  border-style: var(--pendo-input-border-style);\n  padding: var(--instui-component-text-area-padding);\n  gap: var(--instui-component-text-area-gap-content);\n  min-height: var(--instui-component-text-area-min-height);\n  height: auto;\n  max-height: var(--instui-component-text-area-max-height);\n  width: 100%;\n  font-family: var(--instui-component-text-area-font-family);\n  font-weight: var(--instui-component-text-area-font-weight);\n  font-size: var(--instui-component-text-area-font-size-sm);\n  line-height: var(--instui-line-height-standalone-text-base);\n  letter-spacing: normal;\n  font-style: normal;\n  margin: var(--pendo-space-0);\n  background-color: var(--instui-component-text-area-background-color);\n  color: var(--instui-component-text-area-text-color);\n  border-color: var(--instui-component-text-area-border-color);\n\n  &:hover {\n    background: var(--instui-component-text-area-background-hover-color);\n    border-color: var(--instui-component-text-area-border-hover-color);\n  }\n\n  &:focus {\n    background-color: var(--instui-component-text-area-background-color);\n    border-color: var(--instui-component-text-area-border-color);\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-area-placeholder-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-area-placeholder-hover-color);\n  }\n}\n\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n  ._pendo-open-text-poll-input {\n    /* PMF Survey does not have `rows` attribute, so manually set to match other surveys */\n    min-height: 100px;\n  }\n\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* PMF survey inputs are inline-block by default, override to stack vertically. */\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) span:has(.pendo-radio) {\n    display: flex;\n    flex-direction: row;\n    justify-content: start;\n    align-items: center;\n    text-align: left;\n  }\n}\n\n/* ─── Select ─── */\n\n._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select) {\n  border: 0 none;\n  background: none;\n  padding: var(--pendo-space-0);\n  margin: var(--pendo-space-0);\n  position: relative;\n\n  /* Chevron icon — mask-image approach for automatic light/dark theming */\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    right: var(--instui-component-text-input-padding-horizontal-sm);\n    top: var(--instui-component-shared-tokens-spacing-general-space-lg);\n    transform: translateY(-50%);\n    width: var(--instui-component-icon-size-sm);\n    height: var(--instui-component-icon-size-sm);\n    mask-image: var(--instui-icon-chevron-down);\n    mask-size: contain;\n    mask-repeat: no-repeat;\n    mask-position: center;\n    pointer-events: none;\n    background-color: var(--instui-component-text-input-text-color);\n  }\n}\n\nselect._pendo-multi-choice-poll-select {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  height: var(--instui-component-text-input-height-sm);\n  border-radius: var(--instui-component-text-input-border-radius);\n  border-width: var(--instui-component-text-input-border-width);\n  /* border-style token not yet in upstream set; see --pendo-input-border-style in vars.css */\n  border-style: var(--pendo-input-border-style);\n  padding: var(--pendo-space-0)\n    calc(var(--instui-component-text-input-padding-horizontal-sm) + 24px) var(--pendo-space-0)\n    var(--instui-component-text-input-padding-horizontal-sm);\n  font-family: var(--instui-component-text-input-font-family);\n  font-weight: var(--instui-component-text-input-font-weight);\n  font-size: var(--instui-component-text-input-font-size-sm);\n  /* Chromium needs larger line-height to visually center vertically */\n  line-height: calc(var(--instui-line-height-standalone-text-base) * 2);\n  letter-spacing: normal;\n  font-style: normal;\n  background-color: var(--instui-component-text-input-background-color);\n  color: var(--instui-component-text-input-text-color);\n  border-color: var(--instui-component-text-input-border-color);\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:focus {\n    background-color: var(--instui-component-text-input-background-color);\n  }\n}\n\n/* ─── Select Option | Light/Dark (fallback) ─── */\n/* <option> elements are OS-rendered; light-dark() provides the fallback before @supports base-select */\nselect._pendo-multi-choice-poll-select option {\n  font-family: var(--instui-component-text-input-font-family);\n  font-weight: var(--instui-component-text-input-font-weight);\n  font-size: var(--instui-component-text-input-font-size-sm);\n  background-color: var(--instui-component-view-background-primary);\n  color: var(--instui-component-text-base-color);\n}\n\n/* ─── Select Option | Chromium: customizable select (appearance: base-select) ─── */\n@supports (appearance: base-select) {\n  /* Rotate chevron when open */\n  ._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select:open)::after {\n    mask-image: var(--instui-icon-chevron-up);\n  }\n\n  /* Opt the <select> into the new model */\n  select._pendo-multi-choice-poll-select,\n  select._pendo-multi-choice-poll-select::picker(select) {\n    appearance: base-select;\n  }\n\n  /* Hide the browser-generated picker icon — we supply our own via mask-image on the container */\n  select._pendo-multi-choice-poll-select::picker-icon {\n    display: none;\n  }\n\n  /* ─── Picker panel ─── */\n  select._pendo-multi-choice-poll-select::picker(select) {\n    border-radius: var(--instui-component-popover-border-radius);\n    border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n    border-style: solid;\n    overflow: hidden;\n    padding: var(--pendo-space-0);\n    margin: var(--pendo-space-0);\n    background-color: var(--instui-component-options-item-background);\n    border-color: var(--instui-component-popover-border-color);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* ─── Options ─── */\n  select._pendo-multi-choice-poll-select option {\n    border-radius: 0;\n    margin: var(--pendo-space-0);\n    font-family: var(--instui-component-options-item-font-family);\n    font-weight: var(--instui-component-options-item-font-weight);\n    font-size: var(--instui-font-size-text-sm);\n    letter-spacing: var(--instui-component-text-letter-spacing-normal);\n    cursor: pointer;\n    line-height: var(--instui-component-options-item-line-height);\n    height: var(--instui-size-interactive-height-sm);\n    background-color: var(--instui-component-options-item-background);\n    color: var(--instui-component-options-item-color);\n\n    &::checkmark {\n      display: none;\n    }\n\n    &:hover,\n    &:focus {\n      background-color: var(--instui-component-options-item-highlighted-background);\n      color: var(--instui-component-options-item-highlighted-label-color);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:checked {\n      font-weight: var(--instui-component-options-item-font-weight-selected);\n      border-radius: 0;\n      padding-right: calc(\n        var(--instui-component-options-item-padding-horizontal) +\n          var(--instui-spacing-padding-interactive-horizontal-sm)\n      );\n      position: relative;\n      background-color: var(--instui-component-options-item-selected-background);\n      color: var(--instui-component-options-item-selected-label-color);\n\n      /* Check icon — mask-image approach for automatic light/dark theming */\n      &::after {\n        content: \"\";\n        display: block;\n        position: absolute;\n        right: var(--instui-component-options-item-padding-horizontal);\n        top: 50%;\n        transform: translateY(-50%);\n        width: var(--instui-component-icon-size-sm);\n        height: var(--instui-component-icon-size-sm);\n        mask-image: var(--instui-icon-check);\n        mask-size: contain;\n        mask-repeat: no-repeat;\n        mask-position: center;\n        pointer-events: none;\n        background-color: var(--instui-component-options-item-selected-label-color);\n      }\n\n      &:hover {\n        background-color: var(--instui-component-menu-item-selected-highlighted-background);\n      }\n    }\n  }\n}\n\n/* ─── Radio group ─── */\n\n/* Radio label */\n._pendo-multi-choice-poll-select-border label.pendo-radio,\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n  label.pendo-radio {\n  font-family: var(--instui-component-radio-input-font-family);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n  letter-spacing: normal;\n  font-style: normal;\n  margin: var(--pendo-space-0);\n  background-color: var(--instui-color-transparent-color);\n  color: var(--instui-component-radio-input-label-base-color);\n\n  &:hover {\n    color: var(--instui-component-radio-input-label-hover-color);\n  }\n}\n\n/* Radio input */\n._pendo-multi-choice-poll-select-border input.pendo-radio,\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"])\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n  input.pendo-radio {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n  border-radius: var(--instui-component-shared-tokens-border-radius-full);\n  border-width: var(--instui-component-radio-input-border-width);\n  border-style: var(--pendo-input-border-style);\n  margin: var(--instui-component-shared-tokens-spacing-general-space2xs)\n    var(--instui-component-radio-input-gap) var(--pendo-space-0) var(--pendo-space-0);\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-color: var(--instui-component-radio-input-border-color);\n  background-color: var(--instui-component-radio-input-background-color);\n\n  &:hover {\n    background-color: var(--instui-component-radio-input-background-hover-color);\n    border-color: var(--instui-component-radio-input-border-readonly-color);\n  }\n\n  &:checked {\n    box-shadow: var(--instui-component-radio-input-border-selected-color) inset 0 0 0\n      var(--instui-component-radio-input-checked-inset-sm);\n    border-color: var(--instui-component-radio-input-border-selected-color);\n\n    + label {\n      background: var(--instui-color-transparent-color);\n      color: var(--instui-component-radio-input-label-base-color);\n    }\n  }\n\n  &:focus {\n    + label {\n      outline: none;\n    }\n  }\n}\n\n/* Form field label */\n[class$=\"-poll-question\"] > ._pendo-simple-text > ._pendo-text-plain {\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n  letter-spacing: normal;\n  font-style: normal;\n  margin: var(--instui-component-form-field-layout-gap-primitives) var(--pendo-space-0);\n  color: var(--instui-component-form-field-layout-text-color);\n}\n\n/* ─── Number-scale / NPS poll buttons ─── */\n/*\n * Number-scale and NPS polls are HTML radio inputs styled like square buttons;\n * secondary colours for unselected, primary colours for selected/checked.\n */\n\n._pendo-number-scale-poll-wrapper {\n  padding: var(--pendo-space-0);\n}\n\n.pendo-survey-wrapper > div:has(input[type=\"radio\"]),\n._pendo-nps-poll-wrapper,\n[id*=\"survey-pmf-answers\"],\n[id*=\"survey-single-choice\"] {\n  padding: var(--pendo-space-0) var(--pendo-space-0)\n    var(--instui-component-shared-tokens-spacing-general-space-lg);\n  margin: var(--pendo-space-0);\n}\n\n._pendo-number-scale-poll-wrapper > div[role*=\"radiogroup\"],\n._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"],\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) {\n  gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n}\n\n/*\n * UX-Lite (and similar) surveys emit radio inputs without id/for linkage\n * between input and label. Expand the hidden input to cover its container\n * so clicking the visible label area actually activates the radio.\n */\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) > span {\n  position: relative;\n}\n\n.pendo-survey-wrapper\n  > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"])\n  > span\n  > input[type=\"radio\"] {\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n\n._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"] {\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n\nlabel.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\nlabel.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label {\n  height: var(--instui-component-base-button-small-height);\n  min-height: var(--instui-component-base-button-small-height);\n  width: var(--instui-component-base-button-small-height);\n  aspect-ratio: 1 / 1;\n  border-width: var(--instui-border-width-sm);\n  border-radius: var(--instui-component-base-button-border-radius);\n  border-style: var(--instui-component-base-button-border-style);\n  font-size: var(--instui-component-base-button-small-font-size);\n  /* Line height is set to the button height to center the text vertically, and because the text will always be one line. */\n  line-height: var(--instui-component-base-button-small-height);\n  letter-spacing: var(--instui-component-base-button-letter-spacing);\n  font-family: var(--instui-component-base-button-font-family);\n  font-weight: var(--instui-component-base-button-font-weight);\n  text-align: center;\n  margin: var(--pendo-space-0);\n  background: var(--instui-component-base-button-secondary-background);\n  border-color: var(--instui-component-base-button-secondary-border-color);\n  color: var(--instui-component-base-button-secondary-color);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color-start);\n  outline-offset: 0;\n  transition: var(--instui-focus-outline-transition);\n\n  &:hover {\n    background: var(--instui-component-base-button-secondary-hover-background);\n    border-color: var(--instui-component-base-button-secondary-hover-border-color);\n    color: var(--instui-component-base-button-secondary-hover-text-color);\n  }\n\n  &:active {\n    background: var(--instui-component-base-button-secondary-active-background);\n    border-color: var(--instui-component-base-button-secondary-active-border-color);\n    color: var(--instui-component-base-button-secondary-active-text-color);\n  }\n}\n\n/* Number scale description */\nlabel.pendo-radio[class*=\"_pendo-number-scale-poll-\"] + [class$=\"-description\"],\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label + div {\n  width: var(--instui-component-base-button-small-height);\n  margin: var(--pendo-space-0);\n  font-weight: var(--instui-component-metric-label-font-weight);\n  line-height: var(--instui-line-height-standalone-text-xs);\n  font-size: var(--instui-component-metric-label-font-size);\n  color: var(--instui-component-text-muted-color);\n}\n\n/* Right-align the last description so it anchors to the last button's right edge */\n[class*=\"-wrapper\"]:last-child,\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(> span) > span:last-child {\n  position: relative;\n}\n\n[class*=\"-wrapper\"]:last-child > [class$=\"-description\"],\n.pendo-survey-wrapper\n  div:not([id*=\"survey-single-choice\"]):has(> span):last-child\n  > span:last-child\n  > div {\n  position: absolute;\n  width: auto;\n  text-align: right;\n  right: 0;\n}\n\n/* NPS label sits left/right of scale, not below */\n._pendo-nps-poll-lowerbound-label,\n._pendo-nps-poll-upperbound-label {\n  margin: var(--pendo-space-0);\n}\n\ninput.pendo-radio:focus-visible + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\ninput.pendo-radio:focus-visible + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper\n  > :not([id*=\"survey-single-choice\"])\n  input.pendo-radio:focus-visible\n  + label.pendo-radio,\n.pendo-survey-wrapper\n  > :not([id*=\"survey-single-choice\"])\n  input[type=\"radio\"]:focus-visible\n  + label {\n  outline-color: light-dark(\n    var(--instui-focus-outline-color),\n    var(--instui-focus-outline-color-inverse)\n  );\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\ninput.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\ninput.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper\n  > :not([id*=\"survey-single-choice\"])\n  input.pendo-radio:checked\n  + label.pendo-radio,\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) input[type=\"radio\"]:checked + label {\n  background: var(--instui-component-base-button-primary-background);\n  border-color: var(--instui-component-base-button-primary-border-color);\n  color: var(--instui-component-base-button-primary-color);\n\n  &:hover {\n    background: var(--instui-component-base-button-primary-hover-background);\n    border-color: var(--instui-component-base-button-primary-hover-border-color);\n    color: var(--instui-component-base-button-primary-hover-text-color);\n  }\n\n  &:active {\n    background: var(--instui-component-base-button-primary-active-background);\n    border-color: var(--instui-component-base-button-primary-active-border-color);\n    color: var(--instui-component-base-button-primary-active-text-color);\n  }\n}\n\n[class$=\"-poll-question\"] + ._pendo-row [class$=\"-description\"] {\n  padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n  color: var(--instui-component-text-muted-color);\n}\n";
-const textCss = "/**\n * @component pendo-text\n * @selector [class*=\"instui\"]\n * @summary Styles all Pendo text content elements using InstUI typography tokens.\n * @remarks Covers body text, bold, italic, strikethrough, headings (h2/h3), links, and lists.\n *   Headings use smaller font-size overrides inside the tooltipBlank (popover) layout.\n *   Survey text has additional overrides for NPS question titles, bound labels, and CSAT/UX-Lite\n *   scale labels — these are handled at the end of the file and marked `@TODO` for cleanup.\n * @part ._pendo-simple-text — Base text element; maps to `text-content-small` tokens.\n * @part [class*=\"_pendo-text-\"] — All text variant elements; share the base text styles.\n * @part ._pendo-text-bold — Bold inline text.\n * @part ._pendo-text-italic — Italic inline text; uses `text-content-important` tokens.\n * @part ._pendo-text-strike — Strikethrough inline text.\n * @part h2._pendo-text-title heading — Guide heading; maps to `heading-title-card-large` font-size.\n * @part h3._pendo-simple-text subheading — Guide subheading; maps to `heading-title-card-regular` font-size.\n * @part ._pendo-text-link — Inline link; maps to InstUI Link tokens with a focus-outline border-radius.\n * @related pendo-card — Provides the card container where text content is rendered.\n */\n\n._pendo-simple-text,\n[class*=\"_pendo-text-\"] {\n  font-family: var(--instui-component-text-content-small-font-family);\n  font-weight: var(--instui-component-text-content-small-font-weight);\n  font-size: var(--instui-component-text-content-small-font-size);\n  line-height: var(--instui-component-text-content-small-line-height);\n  letter-spacing: var(--instui-component-text-letter-spacing-normal);\n  color: var(--instui-component-text-base-color);\n  max-width: 100%;\n}\n\n._pendo-text-bold {\n  font-weight: var(--instui-component-text-content-important-font-weight);\n}\n\n._pendo-text-italic {\n  font-family: var(--instui-component-text-content-important-font-family);\n  font-weight: var(--instui-component-text-content-important-font-weight);\n  line-height: var(--instui-component-text-content-important-line-height);\n}\n\n._pendo-text-strike {\n  text-decoration: line-through;\n}\n\n/* Heading h2 styles */\nh2:is(._pendo-simple-text, ._pendo-text-title) {\n  font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n  font-family: var(--instui-component-heading-title-card-regular-font-family);\n  line-height: var(--instui-component-heading-title-card-regular-line-height);\n  font-size: var(--instui-component-heading-title-card-large-font-size);\n}\n\n/* Subheading h3 styles */\nh3._pendo-simple-text {\n  font-weight: var(--instui-component-heading-title-card-large-font-weight);\n  font-size: var(--instui-component-heading-title-card-regular-font-size);\n  font-family: var(--instui-component-heading-title-card-large-font-family);\n  line-height: var(--instui-component-heading-title-card-large-line-height);\n}\n\n/* Alert titles match relaxed banners; subtitles match compact banner titles. */\n:is(:scope[class*=\"instui-alert\"], [class*=\"instui-alert\"])[data-layout=\"lightboxBlank\"] {\n  h2._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n    line-height: var(--instui-component-heading-title-card-regular-line-height);\n  }\n\n  h3._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n}\n\n/* Popover titles match compact banners; subtitles are one font token smaller. */\n[data-layout=\"tooltipBlank\"] {\n  h2._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n\n  h3._pendo-simple-text {\n    font-size: var(--instui-font-size-text-sm);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n}\n\n/* Link styles */\n._pendo-text-link {\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n  font-weight: var(--instui-component-link-font-weight);\n  /* border-radius added to ensure focus outline has rounded corners, matching the shape of the link text */\n  border-radius: var(--instui-component-shared-tokens-border-radius-sm);\n  color: var(--instui-component-link-text-color);\n\n  &:is(:hover, :active, :focus) {\n    color: var(--instui-component-link-text-hover-color);\n  }\n\n  &:disabled {\n    color: var(--instui-component-link-text-disabled-color);\n  }\n}\n\n/* List styles */\n._pendo-simple-text ol,\n._pendo-simple-text ul {\n  padding-left: var(--pendo-space-0);\n}\n\n/* Surveys*/\n._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n  /* @TODO: Surveys are terrible, clean this up. */\n\n  & *:not(._pendo-close-guide) {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n  }\n\n  &,\n  /* PMF Thank You text\n     * @TODO: validate selector, ._pendo-simple-text does not have span nested\n     */\n  ._pendo-row:has(+ ._pendo-row > ._pendo-button-primaryButton) ._pendo-simple-text:has(> span:not([class])),\n  /* UX Lite question labels (exclude form control wrappers with inputs) */\n  .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),\n  h2._pendo-simple-text,\n  h2._pendo-text-title ._pendo-simple-text,\n  ._pendo-simple-text._pendo-nps-open-text-poll-question {\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    font-family: var(--instui-component-heading-title-card-mini-font-family);\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n    margin: var(--pendo-space-0) var(--pendo-space-0)\n      var(--instui-component-shared-tokens-spacing-general-space-sm);\n  }\n\n  /* NPS question labels */\n  h2._pendo-text-title ._pendo-simple-text,\n  ._pendo-simple-text._pendo-nps-open-text-poll-question {\n    text-align: left;\n  }\n\n  /* NPS/survey completion messages */\n  h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text {\n    text-align: center;\n  }\n\n  /* NPS label sits left/right of scale, not below */\n  ._pendo-nps-poll-lowerbound-label,\n  ._pendo-nps-poll-upperbound-label {\n    font-style: normal;\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-line-height-standalone-text-xs);\n    text-align: center;\n    color: var(--instui-component-text-muted-color);\n  }\n\n  /* UX Lite & CSAT scale labels */\n  .pendo-survey-wrapper label + div {\n    font-size: var(--instui-component-metric-label-font-size);\n    padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n    text-align: left;\n  }\n}\n\n/* Banner typography follows the banner container rather than an authored size class. */\n:is(:scope, [class*=\"instui\"])[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"]) {\n  :is(._pendo-simple-text, [class*=\"_pendo-text-\"]) {\n    font-size: var(--instui-component-text-content-font-size);\n    font-weight: var(--instui-component-text-content-font-weight);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  :is(h2._pendo-simple-text, h2._pendo-text-title) {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n    line-height: var(--instui-component-heading-title-card-regular-line-height);\n  }\n\n  h3._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n}\n\n@container pantoken-pendo-guide (max-width: 30em) {\n  :is(:scope, [class*=\"instui\"])[data-layout=\"lightboxBlank\"]:not([class*=\"instui-alert\"]) {\n    :is(._pendo-simple-text, [class*=\"_pendo-text-\"]) {\n      font-size: var(--instui-component-text-content-small-font-size);\n      font-weight: var(--instui-component-text-content-small-font-weight);\n      line-height: var(--instui-component-text-content-small-line-height);\n    }\n\n    :is(h2._pendo-simple-text, h2._pendo-text-title) {\n      font-size: var(--instui-component-heading-title-card-mini-font-size);\n      font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n      line-height: var(--instui-component-heading-title-card-mini-line-height);\n    }\n\n    h3._pendo-simple-text {\n      font-size: var(--instui-font-size-text-sm);\n      font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n      line-height: var(--instui-component-heading-title-card-mini-line-height);\n    }\n  }\n}\n";
+const buttonCss = "/**\n * @component pendo-button\n * @selector [class*=\"instui\"]\n * @summary Styles `._pendo-button` elements as InstUI BaseButton (small size).\n * @remarks Applies to all three layout types (tooltipBlank, lightboxBlank, surveys).\n *   In surveys, a lone primary button in its container is centred via a `:has()` rule.\n *   Adjacent button spacing belongs to the owning row wrapper, using the shared button-group gap.\n * @part ._pendo-button — Shared button base; always small-height.\n * @part ._pendo-button-primaryButton — Primary (filled) variant.\n * @part ._pendo-button-custom — Treated as primary; used when the guide author sets a custom colour.\n * @part ._pendo-button-secondaryButton — Secondary (outlined) variant.\n * @part ._pendo-button-tertiaryButton — Tertiary (ghost with border) variant.\n * @related pendo-inputs — Number-scale / NPS poll buttons in surveys, which adopt secondary/tertiary colours.\n * @related pendo-chrome — The dismiss button that shares the guide container.\n */\n\n:is(:scope, [class*=\"instui\"]) {\n  ._pendo-button {\n    height: var(--instui-component-base-button-small-height);\n    min-height: var(--instui-component-base-button-small-height);\n    padding: var(--instui-component-base-button-padding-vertical)\n      var(--instui-component-base-button-small-padding-horizontal);\n    border-width: var(--instui-border-width-sm);\n    border-radius: var(--instui-component-base-button-border-radius);\n    border-style: var(--instui-component-base-button-border-style);\n    font-family: var(--instui-component-base-button-font-family);\n    font-size: var(--instui-component-base-button-small-font-size);\n    font-weight: var(--instui-component-base-button-font-weight);\n    line-height: var(--instui-component-base-button-line-height);\n    letter-spacing: var(--instui-component-base-button-letter-spacing);\n    cursor: pointer;\n    margin: var(--pendo-space-0);\n\n    &:has(+ ._pendo-button) {\n      margin-inline-end: var(--instui-component-shared-tokens-spacing-gap-buttons);\n    }\n  }\n\n  /* Primary/Custom button variant */\n  ._pendo-button-primaryButton,\n  ._pendo-button-custom {\n    background: var(--instui-color-background-interactive-action-primary-base);\n    border-color: var(--instui-color-stroke-interactive-action-primary-base);\n    color: var(--instui-color-text-interactive-action-primary-base);\n\n    &:hover {\n      background: var(--instui-color-background-interactive-action-primary-hover);\n      border-color: var(--instui-color-stroke-interactive-action-primary-hover);\n    }\n\n    &:active {\n      background: var(--instui-color-background-interactive-action-primary-active);\n      border-color: var(--instui-color-stroke-interactive-action-primary-active);\n    }\n\n    &:disabled {\n      background: var(--instui-component-base-button-primary-disabled-background-color);\n      border-color: var(--instui-component-base-button-primary-disabled-border-color);\n      color: var(--instui-component-base-button-primary-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  /* Secondary button variant */\n  ._pendo-button-secondaryButton {\n    background: var(--instui-component-base-button-secondary-background);\n    border-color: var(--instui-component-base-button-secondary-border-color);\n    color: var(--instui-component-base-button-secondary-color);\n\n    &:hover {\n      background: var(--instui-component-base-button-secondary-hover-background);\n      border-color: var(--instui-component-base-button-secondary-hover-border-color);\n      color: var(--instui-component-base-button-secondary-hover-text-color);\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-secondary-active-background);\n      border-color: var(--instui-component-base-button-secondary-active-border-color);\n      color: var(--instui-component-base-button-secondary-active-text-color);\n    }\n\n    &:disabled {\n      background: var(--instui-component-base-button-secondary-disabled-background-color);\n      border-color: var(--instui-component-base-button-secondary-disabled-border-color);\n      color: var(--instui-component-base-button-secondary-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  /* Tertiary button variant */\n  ._pendo-button-tertiaryButton {\n    background: transparent;\n    border-color: var(--instui-component-base-button-primary-ghost-border-color);\n    color: var(--instui-component-base-button-primary-ghost-color);\n\n    &:hover {\n      background: var(--instui-component-base-button-primary-ghost-hover-background);\n      border-color: var(--instui-component-base-button-tertiary-hover-border-color);\n      color: var(--instui-component-base-button-tertiary-hover-text-color);\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-primary-ghost-active-background);\n      border-color: var(--instui-component-base-button-tertiary-active-border-color);\n      color: var(--instui-component-base-button-tertiary-active-text-color);\n    }\n\n    &:disabled {\n      background: transparent;\n      border-color: var(--instui-component-base-button-tertiary-disabled-border-color);\n      color: var(--instui-component-base-button-tertiary-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  /* Surveys: Submit / Finish buttons */\n  &._pendo-guide-walkthrough_:not([data-layout=\"tooltipBlank\"], [data-layout=\"lightboxBlank\"]) {\n    /* Submit / Finish buttons: Center only if they're the only button in the container */\n    div:has(> ._pendo-button-primaryButton):not(:has(> :not(._pendo-button-primaryButton))) {\n      display: flex;\n      justify-content: center;\n    }\n  }\n}\n\n/* Banner buttons use the on-colour treatment from the InstUI banner component. */\n:is(:scope, [class*=\"instui\"]):not([class*=\"instui-alert\"]):is(\n    [data-layout=\"lightboxBlank\"],\n    [class*=\"instui-banner\"]\n  ) {\n  :is(._pendo-button-primaryButton, ._pendo-button-custom) {\n    background: var(--instui-component-base-button-primary-inverse-background);\n    border-color: var(--instui-component-base-button-primary-inverse-border-color);\n    color: var(--instui-component-base-button-primary-inverse-color);\n\n    &:hover {\n      background: var(--instui-component-base-button-primary-inverse-hover-background);\n      border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n      color: var(--instui-component-base-button-primary-on-color-hover-text-color);\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-primary-inverse-active-background);\n      border-color: var(--instui-component-base-button-primary-on-color-active-border-color);\n      color: var(--instui-component-base-button-primary-on-color-active-text-color);\n    }\n\n    &:is(:disabled, [aria-disabled=\"true\"]) {\n      background: var(--instui-component-base-button-primary-on-color-disabled-background-color);\n      border-color: var(--instui-component-base-button-primary-on-color-disabled-border-color);\n      color: var(--instui-component-base-button-primary-on-color-disabled-text-color);\n      cursor: not-allowed;\n    }\n  }\n\n  :is(._pendo-button-secondaryButton, ._pendo-button-tertiaryButton) {\n    background: transparent;\n    border-color: var(--instui-component-base-button-primary-inverse-ghost-border-color);\n    color: light-dark(\n      var(--instui-component-base-button-primary-inverse-color),\n      var(--instui-component-base-button-primary-inverse-ghost-border-color)\n    );\n\n    &:focus {\n      background: var(--instui-component-base-button-primary-inverse-background);\n      border-color: var(--instui-component-base-button-primary-inverse-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-inverse-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n    }\n\n    &:hover {\n      background: var(--instui-component-base-button-primary-inverse-ghost-hover-background);\n      border-color: var(--instui-component-base-button-primary-on-color-hover-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-on-color-hover-text-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n    }\n\n    &:active {\n      background: var(--instui-component-base-button-primary-inverse-ghost-active-background);\n      border-color: var(--instui-component-base-button-secondary-on-color-active-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-on-color-active-text-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n    }\n\n    &:is(:disabled, [aria-disabled=\"true\"]) {\n      background: transparent;\n      border-color: var(--instui-component-base-button-secondary-on-color-disabled-border-color);\n      color: light-dark(\n        var(--instui-component-base-button-primary-on-color-disabled-text-color),\n        var(--instui-component-base-button-primary-inverse-ghost-border-color)\n      );\n      cursor: not-allowed;\n    }\n  }\n}\n";
+const cardCss = "/**\n * @component pendo-card\n * @selector [class*=\"instui\"]\n * @summary Row spacing, content layout, and the shared card-container shell for all guide layouts.\n * @remarks Covers three concerns in one file:\n *   (1) `._pendo-row` margins, with per-layout overrides for close-button clearance;\n *   (2) Pendo's fake-flexbox replacement — Pendo uses `position:absolute` children inside\n *       `.pendo-mock-flexbox-row`, which collapses row height; this replaces it with real\n *       `display:flex` keyed off `data-pendo-justify-content`;\n *   (3) `._pendo-step-container-styles` base — background, text colour, and focus ring shared\n *       by both the alert and the popover layout cards.\n * @part ._pendo-row — A content row; spacing varies by layout type.\n * @part .pendo-block-wrapper — Wrapper around individual content blocks; margin is reset to zero.\n * @part [data-pendo-justify-content] — Row that Pendo has marked for flex alignment.\n * @part .pendo-mock-flexbox-row — Pendo's simulated flex container; replaced with real flexbox here.\n * @part .pendo-mock-flexbox-element — Individual flex children; `position:static` overrides Pendo's inline absolute.\n * @part ._pendo-step-container-styles — The visible card; background, colour, and focus-visible ring.\n * @related pendo-container — Container layouts (alert and popover) built on top of this card shell.\n * @related pendo-chrome — Close button whose height determines the row margin-right clearance.\n */\n\n/* Row spacing in Popover layout */\n._pendo-row {\n  margin: var(--pendo-space-0) var(--pendo-space-0)\n    var(--instui-component-shared-tokens-spacing-general-space-sm);\n  line-height: var(--pendo-space-0);\n  padding: var(--pendo-space-0);\n}\n\n/* Row spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] ._pendo-row {\n  margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n}\n\n/* Row spacing in Banner layout */\n:is([data-layout=\"lightboxBlank\"], [class*=\"instui-banner\"]):not([class*=\"instui-alert\"])\n  ._pendo-row {\n  margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-md);\n}\n\n/* Container is declared in container.css on the banner's ._pendo-step-container-size */\n@container pantoken-pendo-guide (max-width: 30em) {\n  :is([data-layout=\"lightboxBlank\"], [class*=\"instui-banner\"]):not([class*=\"instui-alert\"])\n    ._pendo-row {\n    margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n  }\n}\n\n/* Close button spacing in Popover layout */\n[id*=\"guide-components\"] > :first-child ._pendo-row {\n  margin-right: calc(\n    var(--instui-component-base-button-gap-button-content-sm) +\n      var(--instui-component-base-button-small-height)\n  );\n}\n\n/* Close button spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] [id*=\"guide-components\"] > :first-child ._pendo-row {\n  margin-right: calc(\n    var(--instui-component-base-button-gap-button-content-sm) +\n      var(--instui-component-base-button-small-height) / 2\n  );\n}\n\n/* @TODO: Close button spacing in surveys */\n\n/* Content spacing */\n.pendo-block-wrapper {\n  margin: var(--pendo-space-0);\n}\n\n._pendo-text-paragraph._pendo-multi-choice-poll-question + ._pendo-row .pendo-mock-flexbox-element,\n._pendo-multi-choice-poll-select-border,\n._pendo-multi-choice-poll-select {\n  width: 100%;\n}\n\n/* Flexbox\n   * Pendo simulates flexbox with position:absolute on children, which collapses\n   * the row height. Replace it with real flexbox derived from the\n   * data-pendo-justify-content attribute so the row sizes to its content.\n   */\n[data-pendo-justify-content] .pendo-mock-flexbox-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 0;\n}\n\n[data-pendo-justify-content] .pendo-mock-flexbox-row:has(._pendo-button) {\n  gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n}\n\n[data-pendo-justify-content=\"flex-start\"] .pendo-mock-flexbox-row {\n  justify-content: flex-start;\n}\n\n[data-pendo-justify-content=\"center\"] .pendo-mock-flexbox-row {\n  justify-content: center;\n}\n\n[data-pendo-justify-content=\"flex-end\"] .pendo-mock-flexbox-row {\n  justify-content: flex-end;\n}\n\n[data-pendo-justify-content=\"space-between\"] .pendo-mock-flexbox-row {\n  justify-content: space-between;\n}\n\n/* Reset the absolute positioning Pendo inlines on each child element */\n[data-pendo-justify-content] .pendo-mock-flexbox-row .pendo-mock-flexbox-element {\n  position: static;\n}\n\n/* Card container */\n._pendo-step-container-styles {\n  background-color: var(--instui-component-view-background-primary);\n  color: var(--instui-component-view-color);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color-start);\n  outline-offset: 0;\n  transition: var(--instui-focus-outline-transition);\n\n  &:focus-visible {\n    outline-color: light-dark(\n      var(--instui-focus-outline-color),\n      var(--instui-focus-outline-color-inverse)\n    );\n    outline-offset: var(--instui-focus-outline-offset);\n  }\n}\n\n/* Surveys */\n:is(:scope, [class*=\"instui\"])._pendo-guide-walkthrough_:not(\n    [data-layout=\"tooltipBlank\"],\n    [data-layout=\"lightboxBlank\"]\n  ) {\n  /* Some surveys don't use `._pendo-row` for spacing, so add margin to direct children that aren't rows. */\n  ._pendo-step-container-styles > :is(div, form, textarea, h2):not(._pendo-row) {\n    margin: var(--pendo-space-0) auto var(--instui-component-shared-tokens-spacing-general-space-sm)\n      auto;\n    width: 100%;\n    max-width: var(--pendo-embedded-width);\n  }\n\n  ._pendo-step-container-styles > ._pendo-row {\n    max-width: var(--pendo-embedded-width);\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  /* With no title above it, the leading block would double the card's top padding. */\n  ._pendo-step-container-styles\n    > :is(\n      .pendo-survey-wrapper:first-child,\n      ._pendo-close-guide:first-child + .pendo-survey-wrapper\n    )\n    > :first-child {\n    margin-block-start: var(--pendo-space-0);\n  }\n}\n";
+const chromeCss = "/**\n * @component pendo-chrome\n * @selector [class*=\"instui\"]\n * @summary Decorative guide content (backdrop, image, video, divider) and the close/dismiss button.\n * @remarks \"Chrome\" refers to structural content elements Pendo can insert into any guide layout.\n *   The backdrop display state (block/none) is set via inline style by Pendo's runtime.\n *   The close button is positioned absolutely inside `._pendo-step-container-styles`\n *   (`position:relative`); its inset values differ between the popover and alert layouts.\n * @part ._pendo-backdrop — Fixed full-viewport backdrop; background maps to the mask colour token.\n * @part ._pendo-image — Inline image; constrained to 100% container width.\n * @part [class*=\"pendo-video-wrapper\"] — Video embed wrapper; locked to 16/9 aspect ratio.\n * @part ._pendo-video — The video element inside the wrapper; fills 100%×100%.\n * @part hr — Divider rule; thin line using view-border and tab-panel tokens.\n * @part ._pendo-close-guide — Ghost dismiss button; absolute-positioned in the top-end corner of the card.\n * @related pendo-card — Provides `position:relative` on the card and close-button row margin-right clearance.\n * @related pendo-container — Provides the layout variant context for close-button positioning.\n */\n\n/* Video */\n[class*=\"pendo-video-wrapper\"] {\n  aspect-ratio: 16 / 9;\n  height: auto;\n  overflow: visible;\n  padding-bottom: 0;\n  position: relative;\n}\n\n._pendo-video {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.pendo-mock-flexbox-element:has([class*=\"pendo-video-wrapper\"]) {\n  width: 100%;\n}\n\n/* Image */\n._pendo-image {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Backdrop */\n._pendo-backdrop {\n  background-color: var(--instui-component-mask-background-color);\n}\n\n/* Divider */\n.pendo-mock-flexbox-element:has(._pendo-divider) {\n  width: 100%;\n}\n\nhr {\n  border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n  border-style: var(--instui-component-view-border-style);\n  margin: var(--instui-component-shared-tokens-spacing-general-space-xs) var(--pendo-space-0);\n  border-radius: var(--instui-component-shared-tokens-border-radius-full);\n  border-color: var(--instui-component-tabs-panel-border-color);\n}\n\n/* ─── Close button ─── */\n\n._pendo-close-guide {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  height: var(--instui-component-base-button-small-height);\n  aspect-ratio: 1;\n  border-radius: var(--instui-component-base-button-border-radius);\n  background-color: transparent;\n  border-width: var(--pendo-space-0);\n  position: absolute;\n  inset-inline: auto var(--instui-component-shared-tokens-spacing-general-space-xs);\n  inset-block-start: var(--instui-component-shared-tokens-spacing-general-space-xs);\n  font-size: 0;\n  color: var(--instui-component-icon-base-color);\n  cursor: pointer;\n\n  &::before {\n    content: \"\";\n    inline-size: var(--instui-component-icon-size-sm);\n    block-size: var(--instui-component-icon-size-sm);\n    background: currentColor;\n    mask: var(--instui-icon-x) center / contain no-repeat;\n    transform: translateY(2px);\n  }\n\n  &:hover {\n    background-color: var(--instui-component-base-button-primary-ghost-hover-background);\n  }\n\n  &:active {\n    background-color: var(--instui-component-base-button-primary-ghost-active-background);\n  }\n\n  &:disabled,\n  &[aria-disabled=\"true\"] {\n    color: var(--instui-component-icon-disabled-base-color);\n    cursor: not-allowed;\n  }\n}\n\n[data-layout=\"lightboxBlank\"] ._pendo-close-guide {\n  inset-block-start: var(--instui-component-alert-close-button-margin-top);\n  inset-inline-end: var(--instui-component-alert-close-button-margin-right);\n}\n\n:is(:scope, [class*=\"instui\"]):not([class*=\"instui-alert\"]):is(\n    [data-layout=\"lightboxBlank\"],\n    [class*=\"instui-banner\"]\n  )\n  ._pendo-close-guide {\n  inset-block-start: var(--instui-component-banner-close-button-margin-top);\n  inset-inline-end: var(--instui-component-banner-close-button-margin-right);\n}\n";
+const containerCss = "/**\n * @component pendo-container\n * @selector [class*=\"instui\"]\n * @summary The guide container — shared root for all Pendo guide layout types.\n * @remarks The HTML is injected by Pendo and cannot be modified. The layout type is set via the\n *   `data-layout` attribute; the colour variant is set via the variant class in the Visual Design\n *   Studio. The `._pendo-step-container-size` and `._pendo-step-container-styles` elements are\n *   shared between all layouts; each layout applies its own sizing, spacing, and visual treatment.\n *   Pendo ships layout values we do not enumerate (surveys arrive with no `data-layout`, or with one\n *   such as `bannerNpsSurvey`), so the banner treatment is keyed on the class instead.\n * @modifier [data-layout=\"lightboxBlank\"] alert — Embedded alert guide; full-width with a coloured sidebar strip and status icon.\n * @modifier [data-layout=\"tooltipBlank\"] popover — Overlay tooltip/popover guide; fixed width with optional caret.\n * @modifier _pendo-guide-walkthrough_ survey — Survey guide; no data-layout value, auto width.\n * @modifier -info info — Informational colour variant (alert only).\n * @modifier -danger danger — Danger/error colour variant (alert only).\n * @modifier -success success — Success colour variant (alert only).\n * @modifier -warning warning — Warning colour variant (alert only).\n * @modifier instui banner — A `lightboxBlank` guide whose class contains `instui` is a violet banner by default.\n * @modifier instui-banner banner popover/survey — Give a popover or survey the banner surface, icon swatch, and spacing while keeping the overlay drop shadow. Ignored on alerts.\n * @modifier -sea sea banner — Use the sea surface and icon swatch.\n * @modifier -megaphone megaphone — Replace the default lightbulb glyph with a megaphone.\n * @modifier -poll poll — Replace the default lightbulb glyph with a question-message glyph.\n * @modifier -canvas canvas — Replace the default lightbulb glyph with the reversed Canvas icon.\n * @modifier -parchment parchment — Replace the default lightbulb glyph with the reversed Parchment icon.\n * @modifier -mastery mastery — Replace the default lightbulb glyph with the reversed Mastery icon.\n * @modifier -learnplatform learnplatform — Replace the default lightbulb glyph with the reversed LearnPlatform icon.\n * @modifier -igniteai igniteai — Replace the default lightbulb glyph with the reversed IgniteAI icon.\n * @part ._pendo-guide-backdrop_ — Backdrop container.\n * @part ._pendo-backdrop — Fixed full-viewport overlay; display toggled by Pendo at runtime.\n * @part ._pendo-step-container-size — Positioning/sizing wrapper; stacks above the backdrop.\n * @part ._pendo-step-container-styles — The visible card dialog; styled per layout type.\n * @part .pendo-tooltip-caret — Caret fill triangle (popover/survey only); one of four directional variants.\n * @part .pendo-tooltip-caret-border — 1px-larger caret border layer drawn behind the fill (popover/survey only).\n * @pseudo ::before — Solid variant-coloured sidebar strip on `._pendo-step-container-styles` (alert only), flush with the rounded start edge.\n * @pseudo ::after — Status icon on `._pendo-step-container-styles` (alert only), masked and centred over the strip.\n * @cssproperty --_alert-color <color> — Private; the variant border/strip colour, set by the variant class.\n * @cssproperty --_alert-icon <url> — Private; the variant status icon, set by the variant class.\n * @cssproperty --caret-color <color> — Private; the caret fill colour (maps to `view-background-primary`).\n * @cssproperty --_banner-icon-background <color> — Private; the banner icon swatch colour.\n * @cssproperty --_banner-icon-size <length> — Private; the responsive banner icon swatch size.\n * @cssproperty --_banner-shadow <shadow># | none — Private; `none` on an embedded banner, the overlay elevation on an `instui-banner` popover or survey.\n * @structure\n * [class*=\"instui\"] {\n *   ._pendo-guide-backdrop_ {\n *     ._pendo-backdrop:optional {}\n *   }\n *   ._pendo-step-container-size {\n *     ._pendo-step-container-styles {\n *       ::before:optional {}\n *       ::after:optional {}\n *     }\n *     .pendo-tooltip-caret:optional {}\n *     .pendo-tooltip-caret-border:optional {}\n *   }\n * }\n * @related pendo-card — Card shell, row layout, and focus ring applied to `._pendo-step-container-styles`.\n * @related pendo-chrome — Dismiss button and decorative elements; absolutely positioned inside `._pendo-step-container-styles`.\n */\n\n/* ─── Overlay guides and surveys ─── */\n\n:is(:scope, [class*=\"instui\"]):is([data-layout=\"tooltipBlank\"], ._pendo-guide-walkthrough_) {\n  ._pendo-step-container-size {\n    height: auto;\n  }\n\n  ._pendo-step-container-styles {\n    min-height: 2.75rem;\n    /* @TODO: overflow-y causes scrollbar to break border-radius */\n    /* 2x border radius + 2x caret size */\n    border-radius: var(--instui-component-popover-border-radius);\n    border: var(--instui-border-width-sm) solid var(--instui-component-popover-border-color);\n    box-shadow: var(--instui-elevation-above);\n    /* gap-cards-md + box-shadow y + box-shadow spread */\n    margin-bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md));\n    margin-left: var(--instui-component-shared-tokens-spacing-general-space-md);\n    margin-right: var(--instui-component-shared-tokens-spacing-general-space-md);\n    margin-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n  }\n\n  .pendo-tooltip-caret {\n    --caret-color: var(--instui-component-view-background-primary);\n\n    /* Pendo positions carets against _pendo-step-container-size, but our box\n     * carries margins (for box-shadow room + spacing), so the caret lands at the\n     * margin edge instead of touching the box. Pull each caret back toward the\n     * box by its margin so it sits flush (1px overlap under the border). The\n     * build adds !important, which overrides Pendo's dynamic inline offsets. */\n    &.pendo-tooltip-caret--top {\n      border-top: 16px solid var(--caret-color);\n      /* sits below the box: shift up by margin-bottom */\n      bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 14px);\n      margin: 0;\n\n      & + .pendo-tooltip-caret-border {\n        bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px);\n        margin: 0;\n      }\n    }\n\n    &.pendo-tooltip-caret--right {\n      border-right-color: var(--caret-color);\n      left: -3px;\n      margin: 0 1rem 0 1px;\n\n      & + .pendo-tooltip-caret-border {\n        left: -4px;\n        margin: 0 1rem 0 1px;\n      }\n    }\n\n    &.pendo-tooltip-caret--bottom {\n      border-bottom: 16px solid var(--caret-color);\n      /* sits above the box: shift down by margin-top */\n      top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 14px);\n      margin: 0;\n\n      & + .pendo-tooltip-caret-border {\n        top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px);\n        margin: 0;\n      }\n    }\n\n    &.pendo-tooltip-caret--left {\n      border-left-color: var(--caret-color);\n      right: -3px;\n      margin: 0 calc(1rem + 1px) 0 1px;\n\n      & + .pendo-tooltip-caret-border {\n        right: -4px;\n        margin: 0 calc(1rem + 1px) 0 1px;\n      }\n    }\n  }\n\n  /* Overlay Guides */\n  &[data-layout=\"tooltipBlank\"] {\n    ._pendo-step-container-styles {\n      width: var(--pendo-overlay-width);\n      padding: var(--instui-component-shared-tokens-spacing-padding-card-sm);\n    }\n  }\n\n  /* Surveys */\n  &._pendo-guide-walkthrough_:not(\n      [data-layout=\"tooltipBlank\"],\n      [data-layout=\"lightboxBlank\"],\n      [class*=\"instui-banner\"]\n    ) {\n    ._pendo-step-container-styles {\n      width: auto;\n      padding: var(--instui-component-shared-tokens-spacing-padding-card-lg)\n        var(--instui-component-shared-tokens-spacing-padding-card-lg)\n        var(--instui-component-shared-tokens-spacing-general-space-sm);\n      /* Cuts off box-shadow, but Surveys are anchored to bottom of viewport */\n      margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-md);\n    }\n\n    &:not(:has(._pendo-row)) {\n      ._pendo-step-container-styles {\n        padding-bottom: var(--instui-component-shared-tokens-spacing-padding-card-sm);\n      }\n    }\n  }\n}\n\n/* ─── Banners ─── */\n\n:is(:scope, [class*=\"instui\"]):not([class*=\"instui-alert\"]):is(\n    [data-layout=\"lightboxBlank\"],\n    [class*=\"instui-banner\"]\n  )\n  ._pendo-step-container-size {\n  container: pantoken-pendo-guide / inline-size;\n}\n\n:is(:scope, [class*=\"instui\"]):not([class*=\"instui-alert\"]):is(\n    [data-layout=\"lightboxBlank\"],\n    [class*=\"instui-banner\"]\n  ) {\n  --_banner-close-button-reserve: 0rem;\n  --_banner-glyph: var(--instui-icon-lightbulb);\n  --_banner-icon-background: var(--instui-component-banner-violet-icon-background);\n  --_banner-icon-size: 2rem;\n  --_banner-shadow: none;\n\n  /* An opted-in popover or survey keeps its overlay elevation over the banner surface. */\n  &[class*=\"instui-banner\"]:not([data-layout=\"lightboxBlank\"]) {\n    --_banner-shadow: var(--instui-elevation-above);\n  }\n\n  &[data-layout=\"lightboxBlank\"] ._pendo-step-container-styles {\n    margin: var(--instui-spacing-gap-cards-md) 0;\n  }\n\n  ._pendo-step-container-styles {\n    position: relative;\n    height: auto;\n    overflow: hidden;\n    border: var(--instui-component-banner-border-width) var(--instui-component-banner-border-style)\n      var(--instui-component-banner-border-color);\n    border-radius: var(--instui-component-banner-border-radius);\n    padding-block: var(--instui-component-banner-relaxed-padding-vertical);\n    padding-inline-start: calc(\n      var(--instui-component-banner-relaxed-padding-horizontal) + var(--_banner-icon-size) +\n        var(--instui-component-banner-relaxed-content-gap-horizontal)\n    );\n    padding-inline-end: calc(\n      var(--instui-component-banner-relaxed-padding-horizontal) +\n        var(--_banner-close-button-reserve)\n    );\n    box-shadow: var(--_banner-shadow);\n    color: var(--instui-component-banner-color);\n    background: var(--instui-component-banner-violet-background);\n\n    &::before,\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset-block-start: var(--instui-component-banner-relaxed-padding-vertical);\n      inset-inline-start: var(--instui-component-banner-relaxed-padding-horizontal);\n      inline-size: var(--_banner-icon-size);\n      block-size: var(--_banner-icon-size);\n    }\n\n    &::before {\n      border-radius: var(--instui-component-banner-relaxed-icon-border-radius);\n      background: var(--_banner-icon-background);\n    }\n\n    &::after {\n      background: var(--instui-component-banner-icon-color);\n      mask: var(--_banner-glyph) center / 1.125rem no-repeat;\n    }\n\n    &:has(> ._pendo-close-guide) {\n      --_banner-close-button-reserve: calc(\n        var(--instui-component-base-button-medium-height) +\n          var(--instui-component-banner-close-button-margin-right)\n      );\n    }\n  }\n\n  &[class*=\"-sea\"] {\n    --_banner-icon-background: var(--instui-component-banner-sea-icon-background);\n\n    ._pendo-step-container-styles {\n      background: var(--instui-component-banner-sea-background);\n    }\n  }\n\n  &[class*=\"-megaphone\"] {\n    --_banner-glyph: var(--instui-icon-megaphone);\n  }\n\n  &[class*=\"-verified\"] {\n    --_banner-glyph: var(--instui-icon-shield-check);\n  }\n\n  &[class*=\"-checkmark\"] {\n    --_banner-glyph: var(--instui-icon-check);\n  }\n\n  &[class*=\"-poll\"] {\n    --_banner-glyph: var(--instui-icon-message-circle-question-mark);\n  }\n\n  &[class*=\"-canvas\"] {\n    --_banner-glyph: var(--instui-logo-canvas-icon-reversed);\n  }\n\n  &[class*=\"-parchment\"] {\n    --_banner-glyph: var(--instui-logo-parchment-icon-reversed);\n  }\n\n  &[class*=\"-mastery\"] {\n    --_banner-glyph: var(--instui-logo-mastery-icon-reversed);\n  }\n\n  &[class*=\"-learnplatform\"] {\n    --_banner-glyph: var(--instui-logo-learnplatform-icon-reversed);\n  }\n\n  &[class*=\"-igniteai\"] {\n    --_banner-glyph: var(--instui-logo-igniteai-icon-reversed);\n  }\n}\n\n@container pantoken-pendo-guide (max-width: 30em) {\n  :is(:scope, [class*=\"instui\"]):not([class*=\"instui-alert\"]):is(\n      [data-layout=\"lightboxBlank\"],\n      [class*=\"instui-banner\"]\n    ) {\n    &[data-layout=\"lightboxBlank\"] ._pendo-step-container-styles {\n      margin: var(--instui-spacing-gap-cards-sm) 0;\n    }\n\n    ._pendo-step-container-styles {\n      --_banner-icon-size: 1.5rem;\n      padding-block: var(--instui-component-banner-compact-padding-vertical);\n      padding-inline-start: calc(\n        var(--instui-component-banner-compact-padding-horizontal) + var(--_banner-icon-size) +\n          var(--instui-component-banner-compact-content-gap-horizontal)\n      );\n      padding-inline-end: calc(\n        var(--instui-component-banner-compact-padding-horizontal) +\n          var(--_banner-close-button-reserve)\n      );\n\n      &::before,\n      &::after {\n        inset-block-start: var(--instui-component-banner-compact-padding-vertical);\n        inset-inline-start: var(--instui-component-banner-compact-padding-horizontal);\n      }\n\n      &::before {\n        border-radius: var(--instui-component-banner-compact-icon-border-radius);\n      }\n    }\n  }\n}\n\n/* ─── Embedded alert ─── */\n\n:scope[class*=\"instui-alert\"][data-layout=\"lightboxBlank\"] {\n  /* Variant tokens — set on the container, inherited by all children */\n  &,\n  &[class*=\"-info\"] {\n    --_alert-color: var(--instui-component-alert-info-border-color);\n    --_alert-icon: var(--instui-icon-info);\n  }\n\n  &[class*=\"-danger\"] {\n    --_alert-color: var(--instui-component-alert-danger-border-color);\n    --_alert-icon: var(--instui-icon-circle-x);\n  }\n\n  &[class*=\"-success\"] {\n    --_alert-color: var(--instui-component-alert-success-border-color);\n    --_alert-icon: var(--instui-icon-circle-check);\n  }\n\n  &[class*=\"-warning\"] {\n    --_alert-color: var(--instui-component-alert-warning-border-color);\n    --_alert-icon: var(--instui-icon-triangle-alert);\n  }\n\n  &,\n  ._pendo-step-container-size {\n    margin-right: var(--instui-spacing-space2xs);\n    margin-left: var(--instui-spacing-space2xs);\n    max-width: var(--pendo-embedded-width);\n  }\n\n  ._pendo-step-container-size {\n    /* Stack above the fixed backdrop (z-index: 200000) the same way the overlay guide does */\n    z-index: 300000;\n    /* prevent margin collapse from sibling content to preserve drop shadow */\n    padding-bottom: calc(var(--instui-spacing-space-md));\n    padding-top: var(--instui-spacing-space-sm);\n  }\n\n  ._pendo-step-container-styles {\n    height: auto;\n    border-color: var(--_alert-color);\n    border-width: var(--instui-component-alert-border-width);\n    border-style: var(--instui-component-alert-border-style);\n    border-radius: var(--instui-component-alert-border-radius);\n    overflow: hidden;\n    padding: var(--instui-component-alert-content-padding-vertical)\n      var(--instui-component-alert-content-padding-horizontal)\n      var(--instui-component-alert-content-padding-vertical)\n      calc(var(--pendo-alert-indent) + var(--instui-component-alert-content-padding-horizontal));\n    box-shadow: var(--instui-elevation-above);\n    position: relative;\n    /* gap-cards-md + box-shadow y + box-shadow spread */\n    margin-bottom: var(--instui-spacing-space-md);\n    margin-left: var(--instui-spacing-space-lg);\n    margin-right: var(--instui-spacing-space-lg);\n    margin-top: var(--instui-spacing-space-xs);\n\n    /* Colored sidebar strip — clipped to border-radius by overflow: hidden */\n    &::before {\n      content: \"\";\n      display: block;\n      position: absolute;\n      overflow: hidden;\n      inset-block: 0;\n      left: 0;\n      width: var(--pendo-alert-indent);\n      background-color: var(--_alert-color);\n    }\n\n    /* Icon centered in the sidebar strip */\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: calc((var(--pendo-alert-indent) - var(--instui-component-icon-size-md)) / 2);\n      width: var(--instui-component-icon-size-md);\n      height: var(--instui-component-icon-size-md);\n      mask-image: var(--_alert-icon);\n      mask-size: contain;\n      mask-repeat: no-repeat;\n      mask-position: center;\n      background-color: var(--instui-component-alert-icon-color);\n    }\n  }\n}\n";
+const inputsCss = "/**\n * @component pendo-inputs\n * @selector [class*=\"instui\"]\n * @summary All Pendo survey form input controls: open-text textarea, dropdown select, radio groups, and number-scale/NPS buttons.\n * @remarks Four input types in one layer:\n *   (1) Textarea — `._pendo-open-text-poll-input`; full-width with auto height between min/max.\n *   (2) Select — `._pendo-multi-choice-poll-select`; custom-appearance dropdown with chevron icon; opts\n *       into Chromium's base-select model under `@supports (appearance: base-select)`.\n *   (3) Radio group — `label.pendo-radio` + `input.pendo-radio`; used for single-choice and PMF surveys.\n *   (4) Number-scale / NPS — `input[type=\"radio\"]` + `label` pairs styled as small square buttons\n *       (secondary unselected, primary selected); also covers UX-Lite and CSAT surveys.\n * @part ._pendo-open-text-poll-input — Open-text textarea; full-width with auto height.\n * @part ._pendo-multi-choice-poll-select-border — Select wrapper; supplies the chevron via `::after`.\n * @part select._pendo-multi-choice-poll-select — The `<select>` element.\n * @part select._pendo-multi-choice-poll-select option select-option — The dropdown options (via `::picker(select)` in Chromium base-select mode).\n * @part label.pendo-radio radio-label — Radio label; maps to `instui-component-radio-input` tokens in groups, or button tokens in scale polls.\n * @part input.pendo-radio radio-input — Radio control; custom appearance.\n * @part input[type=\"radio\"] radio — Hidden radio in scale polls; stretched to cover container for click area.\n * @part ._pendo-number-scale-poll-wrapper — Number-scale poll wrapper.\n * @part ._pendo-nps-poll-wrapper — NPS (0–10) poll wrapper.\n * @part .pendo-survey-wrapper — Generic survey wrapper.\n * @part [class$=\"-description\"] — Scale endpoint description label.\n * @part [class$=\"-poll-question\"] poll-label — Form-field label container above a poll group.\n * @pseudo ::after — Chevron-down icon on the select wrapper (base-select); check icon on selected option (base-select only).\n * @pseudo ::placeholder — Placeholder text colour on textarea.\n * @pseudo ::picker(select) — Chromium only: customizable dropdown panel for `base-select` (appearance: base-select).\n * @pseudo ::picker-icon — Chromium only: browser-generated picker icon (hidden via `display: none`).\n * @pseudo ::checkmark — Chromium only: check mark icon on selected option (hidden for custom implementation).\n * @related pendo-button — Standard CTA buttons using the same button tokens.\n * @related pendo-card — Provides the row/flexbox context that inputs live in.\n * @related pendo-vars — Defines textarea min/max-height local tokens.\n */\n\n/* ─── Textarea ─── */\n\n._pendo-row:has(._pendo-open-text-poll-input) {\n  height: auto;\n}\n\n._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-row {\n  height: auto;\n  min-height: unset;\n}\n\n._pendo-row:has(._pendo-open-text-poll-input) .pendo-mock-flexbox-element {\n  position: static;\n  width: 100%;\n}\n\n._pendo-open-text-poll-input {\n  border-radius: var(--instui-component-text-area-border-radius);\n  border-width: var(--instui-component-text-area-border-width);\n  border-style: var(--pendo-input-border-style);\n  padding: var(--instui-component-text-area-padding);\n  gap: var(--instui-component-text-area-gap-content);\n  min-height: var(--instui-component-text-area-min-height);\n  height: auto;\n  max-height: var(--instui-component-text-area-max-height);\n  width: 100%;\n  font-family: var(--instui-component-text-area-font-family);\n  font-weight: var(--instui-component-text-area-font-weight);\n  font-size: var(--instui-component-text-area-font-size-sm);\n  line-height: var(--instui-line-height-standalone-text-base);\n  letter-spacing: normal;\n  font-style: normal;\n  margin: var(--pendo-space-0);\n  background-color: var(--instui-component-text-area-background-color);\n  color: var(--instui-component-text-area-text-color);\n  border-color: var(--instui-component-text-area-border-color);\n\n  &:hover {\n    background: var(--instui-component-text-area-background-hover-color);\n    border-color: var(--instui-component-text-area-border-hover-color);\n  }\n\n  &:focus {\n    background-color: var(--instui-component-text-area-background-color);\n    border-color: var(--instui-component-text-area-border-color);\n  }\n\n  &::placeholder {\n    color: var(--instui-component-text-area-placeholder-color);\n  }\n\n  &:hover::placeholder {\n    color: var(--instui-component-text-area-placeholder-hover-color);\n  }\n}\n\n:is(:scope, [class*=\"instui\"])._pendo-guide-walkthrough_:not(\n    [data-layout=\"tooltipBlank\"],\n    [data-layout=\"lightboxBlank\"]\n  ) {\n  ._pendo-open-text-poll-input {\n    /* PMF Survey does not have `rows` attribute, so manually set to match other surveys */\n    min-height: 100px;\n  }\n\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* PMF survey inputs are inline-block by default, override to stack vertically. */\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"]) span:has(.pendo-radio) {\n    display: flex;\n    flex-direction: row;\n    justify-content: start;\n    align-items: center;\n    text-align: left;\n  }\n}\n\n/* ─── Select ─── */\n\n._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select) {\n  border: 0 none;\n  background: none;\n  padding: var(--pendo-space-0);\n  margin: var(--pendo-space-0);\n  position: relative;\n\n  /* Chevron icon — mask-image approach for automatic light/dark theming */\n  &::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    right: var(--instui-component-text-input-padding-horizontal-sm);\n    top: var(--instui-component-shared-tokens-spacing-general-space-lg);\n    transform: translateY(-50%);\n    width: var(--instui-component-icon-size-sm);\n    height: var(--instui-component-icon-size-sm);\n    mask-image: var(--instui-icon-chevron-down);\n    mask-size: contain;\n    mask-repeat: no-repeat;\n    mask-position: center;\n    pointer-events: none;\n    background-color: var(--instui-component-text-input-text-color);\n  }\n}\n\nselect._pendo-multi-choice-poll-select {\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  height: var(--instui-component-text-input-height-sm);\n  border-radius: var(--instui-component-text-input-border-radius);\n  border-width: var(--instui-component-text-input-border-width);\n  /* border-style token not yet in upstream set; see --pendo-input-border-style in vars.css */\n  border-style: var(--pendo-input-border-style);\n  padding: var(--pendo-space-0)\n    calc(var(--instui-component-text-input-padding-horizontal-sm) + 24px) var(--pendo-space-0)\n    var(--instui-component-text-input-padding-horizontal-sm);\n  font-family: var(--instui-component-text-input-font-family);\n  font-weight: var(--instui-component-text-input-font-weight);\n  font-size: var(--instui-component-text-input-font-size-sm);\n  /* Chromium needs larger line-height to visually center vertically */\n  line-height: calc(var(--instui-line-height-standalone-text-base) * 2);\n  letter-spacing: normal;\n  font-style: normal;\n  background-color: var(--instui-component-text-input-background-color);\n  color: var(--instui-component-text-input-text-color);\n  border-color: var(--instui-component-text-input-border-color);\n\n  &:hover {\n    background-color: var(--instui-component-text-input-background-hover-color);\n    border-color: var(--instui-component-text-input-border-hover-color);\n  }\n\n  &:focus {\n    background-color: var(--instui-component-text-input-background-color);\n  }\n}\n\n/* ─── Select Option | Light/Dark (fallback) ─── */\n/* <option> elements are OS-rendered; light-dark() provides the fallback before @supports base-select */\nselect._pendo-multi-choice-poll-select option {\n  font-family: var(--instui-component-text-input-font-family);\n  font-weight: var(--instui-component-text-input-font-weight);\n  font-size: var(--instui-component-text-input-font-size-sm);\n  background-color: var(--instui-component-view-background-primary);\n  color: var(--instui-component-text-base-color);\n}\n\n/* ─── Select Option | Chromium: customizable select (appearance: base-select) ─── */\n@supports (appearance: base-select) {\n  /* Rotate chevron when open */\n  ._pendo-multi-choice-poll-select-border[id^=\"pendo-select-container-\"]:has(> select:open)::after {\n    mask-image: var(--instui-icon-chevron-up);\n  }\n\n  /* Opt the <select> into the new model */\n  select._pendo-multi-choice-poll-select,\n  select._pendo-multi-choice-poll-select::picker(select) {\n    appearance: base-select;\n  }\n\n  /* Hide the browser-generated picker icon — we supply our own via mask-image on the container */\n  select._pendo-multi-choice-poll-select::picker-icon {\n    display: none;\n  }\n\n  /* ─── Picker panel ─── */\n  select._pendo-multi-choice-poll-select::picker(select) {\n    border-radius: var(--instui-component-popover-border-radius);\n    border-width: var(--instui-component-shared-tokens-stroke-width-sm);\n    border-style: solid;\n    overflow: hidden;\n    padding: var(--pendo-space-0);\n    margin: var(--pendo-space-0);\n    background-color: var(--instui-component-options-item-background);\n    border-color: var(--instui-component-popover-border-color);\n    box-shadow: var(--instui-elevation-above);\n  }\n\n  /* ─── Options ─── */\n  select._pendo-multi-choice-poll-select option {\n    border-radius: 0;\n    margin: var(--pendo-space-0);\n    font-family: var(--instui-component-options-item-font-family);\n    font-weight: var(--instui-component-options-item-font-weight);\n    font-size: var(--instui-font-size-text-sm);\n    letter-spacing: var(--instui-component-text-letter-spacing-normal);\n    cursor: pointer;\n    line-height: var(--instui-component-options-item-line-height);\n    height: var(--instui-size-interactive-height-sm);\n    background-color: var(--instui-component-options-item-background);\n    color: var(--instui-component-options-item-color);\n\n    &::checkmark {\n      display: none;\n    }\n\n    &:hover,\n    &:focus {\n      background-color: var(--instui-component-options-item-highlighted-background);\n      color: var(--instui-component-options-item-highlighted-label-color);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &:checked {\n      font-weight: var(--instui-component-options-item-font-weight-selected);\n      border-radius: 0;\n      padding-right: calc(\n        var(--instui-component-options-item-padding-horizontal) +\n          var(--instui-spacing-padding-interactive-horizontal-sm)\n      );\n      position: relative;\n      background-color: var(--instui-component-options-item-selected-background);\n      color: var(--instui-component-options-item-selected-label-color);\n\n      /* Check icon — mask-image approach for automatic light/dark theming */\n      &::after {\n        content: \"\";\n        display: block;\n        position: absolute;\n        right: var(--instui-component-options-item-padding-horizontal);\n        top: 50%;\n        transform: translateY(-50%);\n        width: var(--instui-component-icon-size-sm);\n        height: var(--instui-component-icon-size-sm);\n        mask-image: var(--instui-icon-check);\n        mask-size: contain;\n        mask-repeat: no-repeat;\n        mask-position: center;\n        pointer-events: none;\n        background-color: var(--instui-component-options-item-selected-label-color);\n      }\n\n      &:hover {\n        background-color: var(--instui-component-menu-item-selected-highlighted-background);\n      }\n    }\n  }\n}\n\n/* ─── Radio group ─── */\n\n/* Radio label */\n._pendo-multi-choice-poll-select-border label.pendo-radio,\n:is(:scope, [class*=\"instui\"])._pendo-guide-walkthrough_:not(\n    [data-layout=\"tooltipBlank\"],\n    [data-layout=\"lightboxBlank\"]\n  )\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n  label.pendo-radio {\n  font-family: var(--instui-component-radio-input-font-family);\n  font-weight: var(--instui-component-radio-input-font-weight);\n  font-size: var(--instui-component-radio-input-font-size-sm);\n  line-height: var(--instui-component-radio-input-line-height-sm);\n  letter-spacing: normal;\n  font-style: normal;\n  margin: var(--pendo-space-0);\n  background-color: var(--instui-color-transparent-color);\n  color: var(--instui-component-radio-input-label-base-color);\n\n  &:hover {\n    color: var(--instui-component-radio-input-label-hover-color);\n  }\n}\n\n/* Radio input */\n._pendo-multi-choice-poll-select-border input.pendo-radio,\n:is(:scope, [class*=\"instui\"])._pendo-guide-walkthrough_:not(\n    [data-layout=\"tooltipBlank\"],\n    [data-layout=\"lightboxBlank\"]\n  )\n  :is([id*=\"survey-pmf-answers\"], [id*=\"survey-single-choice\"])\n  input.pendo-radio {\n  width: var(--instui-component-radio-input-control-size-sm);\n  height: var(--instui-component-radio-input-control-size-sm);\n  border-radius: var(--instui-component-shared-tokens-border-radius-full);\n  border-width: var(--instui-component-radio-input-border-width);\n  border-style: var(--pendo-input-border-style);\n  margin: var(--instui-component-shared-tokens-spacing-general-space2xs)\n    var(--instui-component-radio-input-gap) var(--pendo-space-0) var(--pendo-space-0);\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border-color: var(--instui-component-radio-input-border-color);\n  background-color: var(--instui-component-radio-input-background-color);\n\n  &:hover {\n    background-color: var(--instui-component-radio-input-background-hover-color);\n    border-color: var(--instui-component-radio-input-border-readonly-color);\n  }\n\n  &:checked {\n    box-shadow: var(--instui-component-radio-input-border-selected-color) inset 0 0 0\n      var(--instui-component-radio-input-checked-inset-sm);\n    border-color: var(--instui-component-radio-input-border-selected-color);\n\n    + label {\n      background: var(--instui-color-transparent-color);\n      color: var(--instui-component-radio-input-label-base-color);\n    }\n  }\n\n  &:focus {\n    + label {\n      outline: none;\n    }\n  }\n}\n\n/* Form field label */\n[class$=\"-poll-question\"] > ._pendo-simple-text > ._pendo-text-plain {\n  font-family: var(--instui-component-form-field-layout-font-family);\n  font-weight: var(--instui-component-form-field-layout-font-weight);\n  font-size: var(--instui-component-form-field-layout-font-size);\n  line-height: var(--instui-component-form-field-layout-line-height);\n  letter-spacing: normal;\n  font-style: normal;\n  margin: var(--instui-component-form-field-layout-gap-primitives) var(--pendo-space-0);\n  color: var(--instui-component-form-field-layout-text-color);\n}\n\n/* ─── Number-scale / NPS poll buttons ─── */\n/*\n * Number-scale and NPS polls are HTML radio inputs styled like square buttons;\n * secondary colours for unselected, primary colours for selected/checked.\n */\n\n._pendo-number-scale-poll-wrapper {\n  padding: var(--pendo-space-0);\n}\n\n.pendo-survey-wrapper > div:has(input[type=\"radio\"]),\n._pendo-nps-poll-wrapper,\n[id*=\"survey-pmf-answers\"],\n[id*=\"survey-single-choice\"] {\n  padding: var(--pendo-space-0) var(--pendo-space-0)\n    var(--instui-component-shared-tokens-spacing-general-space-lg);\n  margin: var(--pendo-space-0);\n}\n\n._pendo-number-scale-poll-wrapper > div[role*=\"radiogroup\"],\n._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"],\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) {\n  gap: var(--instui-component-shared-tokens-spacing-gap-buttons);\n  display: flex;\n  flex-direction: row;\n  /* Without wrapping, a narrow guide clips the high end of the scale out of reach. */\n  flex-wrap: wrap;\n  width: fit-content;\n}\n\n/*\n * UX-Lite (and similar) surveys emit radio inputs without id/for linkage\n * between input and label. Expand the hidden input to cover its container\n * so clicking the visible label area actually activates the radio.\n */\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"]) > span {\n  position: relative;\n}\n\n.pendo-survey-wrapper\n  > div:not([id*=\"survey-single-choice\"]):has(input[type=\"radio\"])\n  > span\n  > input[type=\"radio\"] {\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n\n._pendo-nps-poll-wrapper > div[role*=\"radiogroup\"] {\n  align-items: center;\n  justify-content: center;\n  margin: 0 auto;\n}\n\nlabel.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\nlabel.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label {\n  height: var(--instui-component-base-button-small-height);\n  min-height: var(--instui-component-base-button-small-height);\n  width: var(--instui-component-base-button-small-height);\n  aspect-ratio: 1 / 1;\n  border-width: var(--instui-border-width-sm);\n  border-radius: var(--instui-component-base-button-border-radius);\n  border-style: var(--instui-component-base-button-border-style);\n  font-size: var(--instui-component-base-button-small-font-size);\n  /* Line height is set to the button height to center the text vertically, and because the text will always be one line. */\n  line-height: var(--instui-component-base-button-small-height);\n  letter-spacing: var(--instui-component-base-button-letter-spacing);\n  font-family: var(--instui-component-base-button-font-family);\n  font-weight: var(--instui-component-base-button-font-weight);\n  text-align: center;\n  margin: var(--pendo-space-0);\n  background: var(--instui-component-base-button-secondary-background);\n  border-color: var(--instui-component-base-button-secondary-border-color);\n  color: var(--instui-component-base-button-secondary-color);\n  outline: var(--instui-focus-outline-width) var(--instui-focus-outline-style)\n    var(--instui-focus-outline-color-start);\n  outline-offset: 0;\n  transition: var(--instui-focus-outline-transition);\n\n  &:hover {\n    background: var(--instui-component-base-button-secondary-hover-background);\n    border-color: var(--instui-component-base-button-secondary-hover-border-color);\n    color: var(--instui-component-base-button-secondary-hover-text-color);\n  }\n\n  &:active {\n    background: var(--instui-component-base-button-secondary-active-background);\n    border-color: var(--instui-component-base-button-secondary-active-border-color);\n    color: var(--instui-component-base-button-secondary-active-text-color);\n  }\n}\n\n/* Number scale description */\nlabel.pendo-radio[class*=\"_pendo-number-scale-poll-\"] + [class$=\"-description\"],\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) label + div {\n  width: var(--instui-component-base-button-small-height);\n  margin: var(--pendo-space-0);\n  font-weight: var(--instui-component-metric-label-font-weight);\n  line-height: var(--instui-line-height-standalone-text-xs);\n  font-size: var(--instui-component-metric-label-font-size);\n  color: var(--instui-component-text-muted-color);\n}\n\n/* Right-align the last description so it anchors to the last button's right edge */\n[class*=\"-wrapper\"]:last-child,\n.pendo-survey-wrapper > div:not([id*=\"survey-single-choice\"]):has(> span) > span:last-child {\n  position: relative;\n}\n\n[class*=\"-wrapper\"]:last-child > [class$=\"-description\"],\n.pendo-survey-wrapper\n  div:not([id*=\"survey-single-choice\"]):has(> span):last-child\n  > span:last-child\n  > div {\n  position: absolute;\n  width: auto;\n  text-align: right;\n  right: 0;\n}\n\n/* NPS label sits left/right of scale, not below */\n._pendo-nps-poll-lowerbound-label,\n._pendo-nps-poll-upperbound-label {\n  margin: var(--pendo-space-0);\n}\n\ninput.pendo-radio:focus-visible + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\ninput.pendo-radio:focus-visible + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper\n  > :not([id*=\"survey-single-choice\"])\n  input.pendo-radio:focus-visible\n  + label.pendo-radio,\n.pendo-survey-wrapper\n  > :not([id*=\"survey-single-choice\"])\n  input[type=\"radio\"]:focus-visible\n  + label {\n  outline-color: light-dark(\n    var(--instui-focus-outline-color),\n    var(--instui-focus-outline-color-inverse)\n  );\n  outline-offset: var(--instui-focus-outline-offset);\n}\n\ninput.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-number-scale-poll-\"],\ninput.pendo-radio:checked + label.pendo-radio[class*=\"_pendo-nps-poll-\"],\n.pendo-survey-wrapper\n  > :not([id*=\"survey-single-choice\"])\n  input.pendo-radio:checked\n  + label.pendo-radio,\n.pendo-survey-wrapper > :not([id*=\"survey-single-choice\"]) input[type=\"radio\"]:checked + label {\n  background: var(--instui-component-base-button-primary-background);\n  border-color: var(--instui-component-base-button-primary-border-color);\n  color: var(--instui-component-base-button-primary-color);\n\n  &:hover {\n    background: var(--instui-component-base-button-primary-hover-background);\n    border-color: var(--instui-component-base-button-primary-hover-border-color);\n    color: var(--instui-component-base-button-primary-hover-text-color);\n  }\n\n  &:active {\n    background: var(--instui-component-base-button-primary-active-background);\n    border-color: var(--instui-component-base-button-primary-active-border-color);\n    color: var(--instui-component-base-button-primary-active-text-color);\n  }\n}\n\n[class$=\"-poll-question\"] + ._pendo-row [class$=\"-description\"] {\n  padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n  color: var(--instui-component-text-muted-color);\n}\n";
+const textCss = "/**\n * @component pendo-text\n * @selector [class*=\"instui\"]\n * @summary Styles all Pendo text content elements using InstUI typography tokens.\n * @remarks Covers body text, bold, italic, strikethrough, headings (h2/h3), links, and lists.\n *   Headings use smaller font-size overrides inside the tooltipBlank (popover) layout.\n *   Survey text has additional overrides for NPS question titles, bound labels, and CSAT/UX-Lite\n *   scale labels — these are handled at the end of the file and marked `@TODO` for cleanup.\n * @part ._pendo-simple-text — Base text element; maps to `text-content-small` tokens.\n * @part [class*=\"_pendo-text-\"] — All text variant elements; share the base text styles.\n * @part ._pendo-text-bold — Bold inline text.\n * @part ._pendo-text-italic — Italic inline text; uses `text-content-important` tokens.\n * @part ._pendo-text-strike — Strikethrough inline text.\n * @part h2._pendo-text-title heading — Guide heading; maps to `heading-title-card-large` font-size.\n * @part h3._pendo-simple-text subheading — Guide subheading; maps to `heading-title-card-regular` font-size.\n * @part ._pendo-text-link — Inline link; maps to InstUI Link tokens with a focus-outline border-radius.\n * @related pendo-card — Provides the card container where text content is rendered.\n */\n\n._pendo-simple-text,\n[class*=\"_pendo-text-\"] {\n  font-family: var(--instui-component-text-content-small-font-family);\n  font-weight: var(--instui-component-text-content-small-font-weight);\n  font-size: var(--instui-component-text-content-small-font-size);\n  line-height: var(--instui-component-text-content-small-line-height);\n  letter-spacing: var(--instui-component-text-letter-spacing-normal);\n  color: var(--instui-component-text-base-color);\n  max-width: 100%;\n}\n\n._pendo-text-bold {\n  font-weight: var(--instui-component-text-content-important-font-weight);\n}\n\n._pendo-text-italic {\n  font-family: var(--instui-component-text-content-important-font-family);\n  font-weight: var(--instui-component-text-content-important-font-weight);\n  line-height: var(--instui-component-text-content-important-line-height);\n}\n\n._pendo-text-strike {\n  text-decoration: line-through;\n}\n\n/* Heading h2 styles */\nh2:is(._pendo-simple-text, ._pendo-text-title) {\n  font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n  font-family: var(--instui-component-heading-title-card-regular-font-family);\n  line-height: var(--instui-component-heading-title-card-regular-line-height);\n  font-size: var(--instui-component-heading-title-card-large-font-size);\n}\n\n/* Subheading h3 styles */\nh3._pendo-simple-text {\n  font-weight: var(--instui-component-heading-title-card-large-font-weight);\n  font-size: var(--instui-component-heading-title-card-regular-font-size);\n  font-family: var(--instui-component-heading-title-card-large-font-family);\n  line-height: var(--instui-component-heading-title-card-large-line-height);\n}\n\n/* Alert titles match relaxed banners; subtitles match compact banner titles. */\n:is(:scope[class*=\"instui-alert\"], [class*=\"instui-alert\"])[data-layout=\"lightboxBlank\"] {\n  h2._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n    line-height: var(--instui-component-heading-title-card-regular-line-height);\n  }\n\n  h3._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n}\n\n/* Popover titles match compact banners; subtitles are one font token smaller. */\n[data-layout=\"tooltipBlank\"] {\n  h2._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n\n  h3._pendo-simple-text {\n    font-size: var(--instui-font-size-text-sm);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n}\n\n/* Link styles */\n._pendo-text-link {\n  text-decoration: var(--instui-component-link-text-decoration-within-text);\n  font-weight: var(--instui-component-link-font-weight);\n  /* border-radius added to ensure focus outline has rounded corners, matching the shape of the link text */\n  border-radius: var(--instui-component-shared-tokens-border-radius-sm);\n  color: var(--instui-component-link-text-color);\n\n  &:is(:hover, :active, :focus) {\n    color: var(--instui-component-link-text-hover-color);\n  }\n\n  &:disabled {\n    color: var(--instui-component-link-text-disabled-color);\n  }\n}\n\n/* List styles */\n._pendo-simple-text ol,\n._pendo-simple-text ul {\n  padding-left: var(--pendo-space-0);\n}\n\n/* Surveys*/\n:is(:scope, [class*=\"instui\"])._pendo-guide-walkthrough_:not(\n    [data-layout=\"tooltipBlank\"],\n    [data-layout=\"lightboxBlank\"]\n  ) {\n  /* @TODO: Surveys are terrible, clean this up. */\n\n  /* Banner surveys take their sizes from the banner block below instead. */\n  &:not([class*=\"instui-banner\"]) *:not(._pendo-close-guide) {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n  }\n\n  &,\n  /* PMF Thank You text\n     * @TODO: validate selector, ._pendo-simple-text does not have span nested\n     */\n  ._pendo-row:has(+ ._pendo-row > ._pendo-button-primaryButton) ._pendo-simple-text:has(> span:not([class])),\n  /* UX Lite question labels (exclude form control wrappers with inputs) */\n  .pendo-survey-wrapper>div:not(:has([class])):not(:has(input)),\n  h2._pendo-simple-text,\n  h2._pendo-text-title ._pendo-simple-text,\n  ._pendo-simple-text._pendo-nps-open-text-poll-question {\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    font-family: var(--instui-component-heading-title-card-mini-font-family);\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n    margin: var(--pendo-space-0) var(--pendo-space-0)\n      var(--instui-component-shared-tokens-spacing-general-space-sm);\n  }\n\n  /* NPS question labels */\n  h2._pendo-text-title ._pendo-simple-text,\n  ._pendo-simple-text._pendo-nps-open-text-poll-question {\n    text-align: left;\n  }\n\n  /* NPS/survey completion messages */\n  h2._pendo-text-title._pendo-nps-poll-success-message ._pendo-simple-text {\n    text-align: center;\n  }\n\n  /* NPS label sits left/right of scale, not below */\n  ._pendo-nps-poll-lowerbound-label,\n  ._pendo-nps-poll-upperbound-label {\n    font-style: normal;\n    font-size: var(--instui-component-metric-label-font-size);\n    font-weight: var(--instui-component-metric-label-font-weight);\n    line-height: var(--instui-line-height-standalone-text-xs);\n    text-align: center;\n    color: var(--instui-component-text-muted-color);\n  }\n\n  /* UX Lite & CSAT scale labels */\n  .pendo-survey-wrapper label + div {\n    font-size: var(--instui-component-metric-label-font-size);\n    padding-top: var(--instui-component-shared-tokens-spacing-general-space-xs);\n    text-align: left;\n  }\n}\n\n/* Banner typography follows the banner container rather than an authored size class. */\n:is(:scope, [class*=\"instui\"]):not([class*=\"instui-alert\"]):is(\n    [data-layout=\"lightboxBlank\"],\n    [class*=\"instui-banner\"]\n  ) {\n  :is(._pendo-simple-text, [class*=\"_pendo-text-\"]) {\n    font-size: var(--instui-component-text-content-font-size);\n    font-weight: var(--instui-component-text-content-font-weight);\n    line-height: var(--instui-component-text-content-line-height);\n  }\n\n  /* Re-assert after the rule above, which outranks the bare variant classes. */\n  :is(._pendo-text-bold, ._pendo-text-italic) {\n    font-weight: var(--instui-component-text-content-important-font-weight);\n  }\n\n  :is(h2._pendo-simple-text, h2._pendo-text-title) {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    font-weight: var(--instui-component-heading-title-card-regular-font-weight);\n    line-height: var(--instui-component-heading-title-card-regular-line-height);\n  }\n\n  h3._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n}\n\n@container pantoken-pendo-guide (max-width: 30em) {\n  :is(:scope, [class*=\"instui\"]):not([class*=\"instui-alert\"]):is(\n      [data-layout=\"lightboxBlank\"],\n      [class*=\"instui-banner\"]\n    ) {\n    :is(._pendo-simple-text, [class*=\"_pendo-text-\"]) {\n      font-size: var(--instui-component-text-content-small-font-size);\n      font-weight: var(--instui-component-text-content-small-font-weight);\n      line-height: var(--instui-component-text-content-small-line-height);\n    }\n\n    :is(._pendo-text-bold, ._pendo-text-italic) {\n      font-weight: var(--instui-component-text-content-important-font-weight);\n    }\n\n    :is(h2._pendo-simple-text, h2._pendo-text-title) {\n      font-size: var(--instui-component-heading-title-card-mini-font-size);\n      font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n      line-height: var(--instui-component-heading-title-card-mini-line-height);\n    }\n\n    h3._pendo-simple-text {\n      font-size: var(--instui-font-size-text-sm);\n      font-weight: var(--instui-component-heading-title-card-mini-font-weight);\n      line-height: var(--instui-component-heading-title-card-mini-line-height);\n    }\n  }\n}\n";
 //#endregion
 //#region src/layers.ts
 /**
@@ -255,7 +255,8 @@ function buildPendoCss(options = {}) {
 * violet and sea banner guide treatments alongside alerts, popovers, surveys, and controls. The
 * component CSS is ported from `@instructure/pendo-global-css`; pantoken supplies the tokens and the
 * assembly. A single theme class containing `instui` activates the scoped stylesheet; compact
-* suffixes on that class select banner colors and glyphs.
+* suffixes on that class select banner colors and glyphs, and an `instui-banner` prefix extends the
+* banner surface to popovers and surveys while keeping their overlay elevation.
 *
 * {@link buildPendoCss} composes the stylesheet; {@link pendoCss} is the ready-made `rebrand` build
 * (scoped, `!important`). A static file is published at `@pantoken/pendo/global.css`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/pendo",
-  "version": "0.3.17",
+  "version": "0.4.0",
   "description": "Instructure-styled global CSS for Pendo guides, built on pantoken tokens (ported from @instructure/pendo-global-css).",
   "homepage": "https://pantoken.app",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",