@pantoken/pendo 0.3.13 → 0.3.15

package/README.md

@@ -2,7 +2,7 @@
 
 An Instructure-styled global stylesheet for Pendo guides, built on pantoken tokens.
 
-Pendo injects guide HTML into a host page. This renders that guide DOM (`._pendo-*`) to match Instructure UI: buttons, cards, popovers, alerts, selects, text areas, radios, NPS and number-scale polls, dividers, images, and video. The component CSS is ported from `@instructure/pendo-global-css`; pantoken supplies the `--instui-*` token layer and assembles the result.
+Pendo injects guide HTML into a host page. This renders that guide DOM (`._pendo-*`) to match Instructure UI: buttons, cards, popovers, alerts, banners, selects, text areas, radios, NPS and number-scale polls, dividers, images, and video. The component CSS is ported from `@instructure/pendo-global-css`; pantoken supplies the `--instui-*` token layer and assembles the result.
 
 ## Install
 
@@ -46,13 +46,42 @@ pantoken generate pendo --out ./pendo --theme canvas --no-scope --no-important
 
 Writes `global.css`.
 
+The first line is a minifier-preserved package coordinate such as
+`/*! @pantoken/pendo@0.3.13 */`, so deployed styles can be traced to their exact release.
+
+## Banner guides
+
+Pendo themes accept one additional class. Any class containing `instui` activates this stylesheet
+without styling the surrounding application. For a `lightboxBlank` guide, plain `instui` selects a
+violet banner with a lightbulb glyph. Add compact suffixes to the same class to change its treatment:
+
+| Suffix           | Treatment                      |
+| ---------------- | ------------------------------ |
+| `-sea`           | Sea background and icon swatch |
+| `-megaphone`     | Megaphone glyph                |
+| `-poll`          | Question-message glyph         |
+| `-canvas`        | Reversed Canvas icon           |
+| `-parchment`     | Reversed Parchment icon        |
+| `-mastery`       | Reversed Mastery icon          |
+| `-learnplatform` | Reversed LearnPlatform icon    |
+
+Suffixes compose inside that one class. For example, `instui-sea-poll` is a sea banner with the poll
+glyph. Use `instui-alert-info` (or `-danger`, `-success`, `-warning`) for an alert, and
+`instui-popover` for a popover. Banner spacing and heading typography respond to the guide
+container's inline size: widths at or below the InstUI `sm` breakpoint (`30em`) use compact values,
+while wider content placements use relaxed values. No authored size class is required.
+
+Inside a banner, Pendo primary and custom buttons use the filled primary-on-colour treatment.
+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.
+
 ## 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`.
 - **Component layers** — the ported `._pendo-*` rules, assembled in a fixed `@layer` cascade order. Layered `!important` is what keeps guide styles above Pendo's own unlayered `!important`.
 - **Package-local transforms** (`src/plugins/`, PostCSS, scoped to this package — Pendo deployment behavior, not general pantoken plugins):
   - `add-important` — adds `!important` to component declarations.
-  - `add-scope` — wraps everything in `@scope (._pendo-step-container)` for DOM containment.
+  - `add-scope` — wraps everything in `@scope ([class*="instui"]._pendo-step-container)` for DOM containment.
 - **Token pruning** — [`@pantoken/plugin-prune-custom-props`](../../plugins/postcss/prune-custom-props), a shared plugin (any renderer built on the full token layer wants it). It tree-shakes the token set to only what the guide references, dropping ≈1,800 unused icon data-URIs — the full build is ~95 KB instead of ~1.7 MB.
 - **Focus ring** — `focusOutlineDeclarations()` + `focusOutlineRules()` from [`@pantoken/components`](../../formats/components) build the animated ring for the plain focusables (`._pendo-button`, `._pendo-close-guide`, `._pendo-text-link`) in a last-declared `instui.focusOutline` layer. (The ring used to be a standalone plugin; it now ships in `@pantoken/components`, which also bakes it into `base.css`.) Components with custom focus behavior (select/textarea background resets, the radio and number-scale sibling outlines, the card's `:focus-visible` reset) keep their own rules, referencing the `--instui-focus-outline-*` tokens.
 

package/dist/global.css

@@ -1 +1,2 @@
-@scope(._pendo-step-container){:scope{--kq:#fff;--kp:#0000;--jm:#03893d;--jn:#037d37;--jo:#f2f4f5;--jx:#dfe1e3;--jy:#c7cacd;--jz:#aab0b5;--ka:#9ea6ad;--kb:#8d959f;--kc:#7e8792;--jp:#6a7883;--jq:#5f6e7a;--jr:#576773;--js:#4a5b68;--jt:#334450;--ju:#273540;--jv:#1c222b;--jw:#171b21;--jj:#accdf7;--jk:#7fb4f1;--jl:#4798e3;--jg:#2b7abc;--jh:#2369a4;--ji:#1a5281;--kn:#e62429;--ko:#cf1f24;--km:#cf4a00;--ke:#eef4fd;--kj:#e2eaf7;--kk:#86a8d5;--kl:#7097c7;--kf:#44709f;--kg:#2e5177;--kh:#234465;--ki:#1d354f;--kr:#ffffffbf;--kd:#1c222bbf;--ky:.0625rem;--lc:.125rem;--lg:.25rem;--lh:.5rem;--kz:.75rem;--la:.875rem;--lb:1rem;--ld:1.25rem;--le:1.5rem;--lf:2rem;--kt:Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;--ks:Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif;--kw:400;--kv:500;--kx:600;--ku:700;--jb:150%;--jd:125%;--iz:125%;--ja:1.125rem;--hu:solid;--hr:0rem;--fn:999rem;--fz:0rem;--fe:.375rem;--ee:underline;--eb:1rem;--ea:1.25rem;--dp:1.5rem;--bw:normal;--bq:solid;--by:.25rem;--be:solid;--bg:.5rem;--bh:.5rem;--is: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);--it: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);--iu: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);--iv: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);--iw: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);--ix: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);--iy: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)}@layer instui.tokens{[class*=instui]{--lj:var(--lf);--li:var(--le);--lw:var(--lc);--lv:var(--lg);--lt:var(--lh);--ls:var(--kz);--lr:var(--lb);--lu:var(--le);--ll:var(--kz);--lk:var(--lb);--lm:var(--lh);--lo:var(--lh);--ln:var(--lb);--lq:var(--lh);--lp:var(--kz);--d:var(--lg);--c:var(--lh);--b:var(--kz);--a:var(--kz);--g:var(--ky);--f:var(--lc);--e:var(--ky);--ij:var(--kt);--ii:var(--ks);--io:var(--kw);--ip:var(--kx);--iq:var(--ku);--ir:var(--kv);--jc:var(--ld);--jf:var(--kz);--je:var(--lb);--in:var(--kz);--im:var(--la);--ik:var(--lb);--il:var(--ld);--o:light-dark(var(--kq),var(--jw));--p:light-dark(var(--kq),var(--jw));--i:light-dark(var(--ki),var(--ke));--k:light-dark(var(--kh),var(--kq));--j:light-dark(var(--jx),var(--jt));--l:light-dark(var(--jx),var(--jt));--n:light-dark(var(--ke),var(--kg));--m:light-dark(var(--kj),var(--kh));--h:light-dark(var(--kq),var(--jw));--q:light-dark(var(--kr),var(--kd));--aa:light-dark(var(--kb),var(--jp));--ap:var(--jm);--ab:var(--kn);--aq:var(--km);--ac:var(--jg);--aj:light-dark(var(--jg),var(--jl));--ak:var(--kq);--al:light-dark(var(--kc),var(--jq));--am:light-dark(var(--jt),var(--kc));--an:var(--kb);--ao:light-dark(var(--jv),var(--kq));--ae:light-dark(var(--jx),var(--jt));--af:light-dark(var(--jx),var(--jt));--ad:var(--ko);--ag:var(--jn);--ah:light-dark(var(--kk),var(--kl));--ai:light-dark(var(--jy),var(--js));--ar:light-dark(var(--ju),var(--jo));--bb:light-dark(var(--jr),var(--jz));--ax:light-dark(var(--kb),var(--jr));--ay:light-dark(var(--jt),var(--ka));--az:light-dark(var(--jq),var(--kc));--ba:light-dark(var(--ji),var(--jj));--au:light-dark(var(--ka),var(--jp));--as:light-dark(var(--kq),var(--ki));--at:light-dark(var(--ka),var(--jp));--av:light-dark(var(--ki),var(--ke));--aw:light-dark(var(--jz),var(--js));--t:var(--kq);--r:light-dark(#23446526,#0000004d);--s:light-dark(#2344651a,#00000026);--bc:var(--kp);--y:light-dark(var(--ju),var(--kq));--z:light-dark(var(--jh),var(--jk));--u:light-dark(var(--ki),var(--ke));--v:light-dark(var(--kq),var(--ki));--w:light-dark(var(--kf),var(--kk));--x:light-dark(var(--ki),var(--kq));--hv:var(--y);--ht:var(--h);--hf:var(--o);--hg:var(--p);--hh:var(--al);--hi:var(--am);--hj:var(--a);--hk:var(--e);--hq:var(--y);--hl:var(--ii);--hn:var(--ir);--hm:var(--im);--ho:var(--lj);--hp:var(--lt);--gh:var(--o);--gi:var(--p);--gj:var(--al);--gk:var(--am);--gl:var(--a);--gm:var(--e);--gw:var(--y);--gu:var(--az);--gv:var(--ay);--gn:var(--ii);--gp:var(--io);--go:var(--im);--gq:var(--ls);--gt:var(--ls);--gy:var(--ii);--gz:var(--ip);--ha:var(--jb);--hb:var(--ii);--hd:var(--io);--hc:var(--im);--he:var(--jb);--gx:var(--y);--hs:var(--bb);--gg:var(--aa);--fo:var(--d);--gc:var(--lw);--gb:var(--lv);--ga:var(--lt);--fy:var(--ls);--fx:var(--lr);--fw:var(--ll);--fv:var(--lk);--ge:var(--lo);--gd:var(--ln);--fr:var(--lw);--fu:var(--f);--fq:var(--aj);--fs:var(--ak);--ft:var(--ag);--fp:var(--ad);--gf:var(--g);--ey:var(--o);--ez:var(--p);--fa:var(--al);--fb:var(--an);--fc:var(--ao);--fh:var(--im);--fm:var(--jc);--fg:var(--ii);--fi:var(--io);--fj:var(--lt);--fd:var(--e);--fk:var(--y);--fl:var(--y);--ff:var(--li);--ew:var(--aa);--ex:var(--b);--el:var(--h);--em:var(--y);--en:var(--ii);--eo:var(--io);--ep:var(--io);--eq:var(--n);--er:var(--ar);--es:var(--jd);--et:var(--ls);--eu:var(--i);--ev:var(--as);--ej:var(--in);--ek:var(--io);--ei:var(--k);--eh:var(--q);--ed:var(--z);--eg:var(--ba);--ef:var(--ax);--ec:var(--ir);--do:var(--ij);--dq:var(--iq);--dr:var(--iz);--dw:var(--ij);--dy:var(--iq);--dx:var(--il);--dz:var(--iz);--ds:var(--ij);--du:var(--iq);--dt:var(--ik);--dv:var(--iz);--dn:var(--y);--di:var(--ii);--dk:var(--io);--dj:var(--ik);--dm:var(--ja);--dl:var(--lm);--bz:var(--u);--ca:var(--u);--cb:var(--v);--cc:var(--u);--cd:var(--u);--ce:var(--v);--cf:var(--j);--cg:var(--ae);--ch:var(--at);--ci:var(--u);--cj:var(--u);--ck:var(--u);--cl:var(--u);--cm:var(--v);--cn:var(--w);--co:var(--w);--cp:var(--x);--cq:var(--w);--cr:var(--w);--cs:var(--x);--ct:var(--l);--cu:var(--af);--cv:var(--au);--cw:var(--w);--cx:var(--w);--cy:var(--x);--cz:var(--im);--da:var(--lj);--db:var(--lp);--bp:var(--a);--br:var(--e);--bs:var(--ii);--bt:var(--ir);--bu:var(--lt);--bv:var(--lv);--dc:var(--u);--dd:var(--u);--de:var(--ai);--df:var(--aw);--dg:var(--u);--dh:var(--u);--bx:var(--jd);--bd:var(--b);--bf:var(--f);--bk:var(--ab);--bl:var(--t);--bm:var(--ac);--bn:var(--ap);--bo:var(--aq);--bj:var(--ls);--bi:var(--lu);--pendo-embedded-width:59.25rem;--pendo-alert-indent:2.5rem;--pendo-overlay-width:22.5rem;--pendo-space-0:var(--fz);--pendo-input-border-style:solid;--gs:4rem;--gr:6rem}}@layer instui.elevation{[class*=instui]{--hw:0 .1875rem .375rem var(--s), 0 .1875rem .375rem var(--r)}}@layer instui.container{[class*=instui]:is([data-layout=tooltipBlank],._pendo-guide-walkthrough_){& ._pendo-step-container-size{height:auto!important}& ._pendo-step-container-styles{border-radius:var(--ex)!important;border-color:var(--ew)!important;min-height:2.75rem!important;box-shadow:var(--hw)!important;margin-bottom:calc(4px + var(--fv))!important;margin-left:var(--fy)!important;margin-right:var(--fy)!important;margin-top:var(--gb)!important}& .pendo-tooltip-caret{--caret-color:var(--ht);&.pendo-tooltip-caret--top{border-top-color:var(--caret-color)!important;bottom:calc(4px + var(--fv) - 15px)!important;&+.pendo-tooltip-caret-border{bottom:calc(4px + var(--fv) - 16px)!important}}&.pendo-tooltip-caret--right{border-right-color:var(--caret-color)!important;left:-3px!important;&+.pendo-tooltip-caret-border{left:-4px!important}}&.pendo-tooltip-caret--bottom{border-bottom-color:var(--caret-color)!important;top:calc(var(--gb) - 15px)!important;&+.pendo-tooltip-caret-border{top:calc(var(--gb) - 16px)!important}}&.pendo-tooltip-caret--left{border-left-color:var(--caret-color)!important;right:-3px!important;&+.pendo-tooltip-caret-border{right:-4px!important}}}&[data-layout=tooltipBlank]{& ._pendo-step-container-styles{width:var(--pendo-overlay-width)!important;padding:var(--ge) var(--ge) var(--pendo-space-0)!important}}&._pendo-guide-walkthrough_:not([data-layout=tooltipBlank],[data-layout=lightboxBlank]){& ._pendo-step-container-styles{width:auto!important;padding:var(--gd) var(--gd) var(--ga)!important;margin-bottom:var(--fy)!important}&:not(:has(._pendo-row)){& ._pendo-step-container-styles{padding-bottom:var(--ge)!important}}}}[class*=instui][data-layout=lightboxBlank]{&,&[class*=instui-info]{--_alert-color:var(--bm);--_alert-icon:var(--ix)}&[class*=instui-danger]{--_alert-color:var(--bk);--_alert-icon:var(--iw)}&[class*=instui-success]{--_alert-color:var(--bn);--_alert-icon:var(--iv)}&[class*=instui-warning]{--_alert-color:var(--bo);--_alert-icon:var(--iy)}&,& ._pendo-step-container-size{margin-right:var(--lw)!important;margin-left:var(--lw)!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-size{z-index:300000!important;padding-bottom:calc(var(--ls))!important;padding-top:var(--lt)!important}& ._pendo-step-container-styles{border-color:var(--_alert-color)!important;border-width:var(--bf)!important;border-style:var(--be)!important;border-radius:var(--bd)!important;height:auto!important;padding:var(--bj) var(--bi) var(--bj) calc(var(--pendo-alert-indent) + var(--bi))!important;box-shadow:var(--hw)!important;margin-bottom:var(--ls)!important;margin-left:var(--lr)!important;margin-right:var(--lr)!important;margin-top:var(--lv)!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(--ea)) / 2)!important;width:var(--ea)!important;height:var(--ea)!important;mask-image:var(--_alert-icon)!important;background-color:var(--bl)!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-top:var(--pendo-space-0)!important;margin-right:var(--pendo-space-0)!important;margin-bottom:var(--ga)!important;margin-left:var(--pendo-space-0)!important;line-height:var(--pendo-space-0)!important}[data-layout=lightboxBlank] ._pendo-row{margin-top:var(--pendo-space-0)!important;margin-right:var(--pendo-space-0)!important;margin-bottom:var(--fw)!important;margin-left:var(--pendo-space-0)!important}[id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--bv) + var(--da))!important}[data-layout=lightboxBlank] [id*=guide-components]>:first-child ._pendo-row{margin-right:calc(var(--bv) + var(--da) / 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=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(--ht)!important;color:var(--hv)!important;outline:var(--ih) var(--if) var(--ia)!important;outline-offset:0!important;transition:var(--ig)!important;&:focus-visible{outline-color:light-dark(var(--hx),var(--hz))!important;outline-offset:var(--id)!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(--ga) 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(--hb)!important;font-weight:var(--hd)!important;font-size:var(--hc)!important;line-height:var(--he)!important;letter-spacing:var(--hr)!important;color:var(--gx)!important;max-width:100%!important}._pendo-text-bold{font-weight:var(--gz)!important}._pendo-text-italic{font-family:var(--gy)!important;font-weight:var(--gz)!important;line-height:var(--ha)!important}._pendo-text-strike{text-decoration:line-through!important}h2:is(._pendo-simple-text,._pendo-text-title){font-weight:var(--dy)!important;font-family:var(--dw)!important;line-height:var(--dz)!important;font-size:var(--dp)!important}h3._pendo-simple-text{font-weight:var(--dq)!important;font-size:var(--dx)!important;font-family:var(--do)!important;line-height:var(--dr)!important}[data-layout=tooltipBlank]{& h2._pendo-simple-text{font-size:var(--dx)!important;line-height:var(--dv)!important}& h3._pendo-simple-text{font-size:var(--dt)!important;line-height:var(--dz)!important}}._pendo-text-link{text-decoration:var(--ee)!important;font-weight:var(--ec)!important;border-radius:var(--fo)!important;color:var(--ed)!important;&:is(:hover,:active,:focus){color:var(--eg)!important}&:disabled{color:var(--ef)!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(--dt)!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(--du)!important;font-family:var(--ds)!important;font-size:var(--dt)!important;line-height:var(--dv)!important;margin:var(--pendo-space-0) var(--pendo-space-0) var(--ga)!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(--ej)!important;font-weight:var(--ek)!important;line-height:var(--jf)!important;text-align:center!important;color:var(--hs)!important}& .pendo-survey-wrapper label+div{font-size:var(--ej)!important;padding-top:var(--gb)!important;text-align:left!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(--eh)!important}.pendo-mock-flexbox-element:has(._pendo-divider){width:100%!important}hr{border-width:var(--gf)!important;border-style:var(--hu)!important;margin:var(--gb) var(--pendo-space-0)!important;border-radius:var(--fn)!important;border-color:var(--gg)!important}._pendo-close-guide{padding-bottom:var(--gb)!important;height:var(--da)!important;aspect-ratio:1!important;border-radius:var(--bp)!important;border-width:var(--pendo-space-0)!important;background-color:#0000!important;background-position:50%!important;background-repeat:no-repeat!important;background-size:var(--eb)!important;inset-inline:auto var(--gb)!important;font-size:var(--il)!important;font-family:var(--bs)!important;font-weight:var(--kv)!important;color:var(--gx)!important;position:absolute!important;inset-block-start:var(--gb)!important;&:hover{background-color:var(--cj)!important}&:active{background-color:var(--ci)!important}}[data-layout=lightboxBlank] ._pendo-close-guide{inset-block-start:var(--bh)!important;inset-inline-end:var(--bg)!important}}@layer instui.button{[class*=instui]{& ._pendo-button{height:var(--da)!important;min-height:var(--da)!important;padding:var(--by) var(--db)!important;border-width:var(--br)!important;border-radius:var(--bp)!important;border-style:var(--bq)!important;font-family:var(--bs)!important;font-size:var(--cz)!important;font-weight:var(--bt)!important;line-height:var(--bx)!important;letter-spacing:var(--bw)!important;cursor:pointer!important;margin:var(--pendo-space-0) var(--bu) var(--pendo-space-0) var(--pendo-space-0)!important;.pendo-mock-flexbox-element:last-child>&{margin-right:var(--pendo-space-0)!important}}& ._pendo-button-primaryButton,& ._pendo-button-custom{background:var(--cc)!important;border-color:var(--cd)!important;color:var(--ce)!important;&:hover{background:var(--ck)!important;border-color:var(--cl)!important;color:var(--cm)!important}&:active{background:var(--bz)!important;border-color:var(--ca)!important;color:var(--cb)!important}&:disabled{background:var(--cf)!important;border-color:var(--cg)!important;color:var(--ch)!important;cursor:not-allowed!important}}& ._pendo-button-secondaryButton{background:var(--cq)!important;border-color:var(--cr)!important;color:var(--cs)!important;&:hover{background:var(--cw)!important;border-color:var(--cx)!important;color:var(--cy)!important}&:active{background:var(--cn)!important;border-color:var(--co)!important;color:var(--cp)!important}&:disabled{background:var(--ct)!important;border-color:var(--cu)!important;color:var(--cv)!important;cursor:not-allowed!important}}& ._pendo-button-tertiaryButton{border-color:var(--ah)!important;color:var(--av)!important;background:0 0!important;&:hover{background:var(--n)!important;border-color:var(--dg)!important;color:var(--dh)!important}&:active{background:var(--m)!important;border-color:var(--dc)!important;color:var(--dd)!important}&:disabled{border-color:var(--de)!important;color:var(--df)!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}}}}@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(--gl)!important;border-width:var(--gm)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--gt)!important;gap:var(--gq)!important;min-height:var(--gs)!important;height:auto!important;max-height:var(--gr)!important;width:100%!important;font-family:var(--gn)!important;font-weight:var(--gp)!important;font-size:var(--go)!important;line-height:var(--je)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--gh)!important;color:var(--gw)!important;border-color:var(--gj)!important;font-style:normal!important;&:hover{background:var(--gi)!important;border-color:var(--gk)!important}&:focus{background-color:var(--gh)!important;border-color:var(--gj)!important}&::placeholder{color:var(--gu)!important}&:hover::placeholder{color:var(--gv)!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(--hp)!important;top:var(--fx)!important;width:var(--eb)!important;height:var(--eb)!important;mask-image:var(--it)!important;pointer-events:none!important;background-color:var(--hq)!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(--ho)!important;border-radius:var(--hj)!important;border-width:var(--hk)!important;border-style:var(--pendo-input-border-style)!important;padding:var(--pendo-space-0) calc(var(--hp) + 24px) var(--pendo-space-0) var(--hp)!important;font-family:var(--hl)!important;font-weight:var(--hn)!important;font-size:var(--hm)!important;line-height:calc(var(--je) * 2)!important;letter-spacing:normal!important;background-color:var(--hf)!important;color:var(--hq)!important;border-color:var(--hh)!important;font-style:normal!important;&:hover{background-color:var(--hg)!important;border-color:var(--hi)!important}&:focus{background-color:var(--hf)!important}}select._pendo-multi-choice-poll-select option{font-family:var(--hl)!important;font-weight:var(--hn)!important;font-size:var(--hm)!important;background-color:var(--ht)!important;color:var(--gx)!important}@supports (appearance:base-select){._pendo-multi-choice-poll-select-border[id^=pendo-select-container-]:has(>select:open):after{mask-image:var(--iu)!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(--ex)!important;border-width:var(--gf)!important;padding:var(--pendo-space-0)!important;margin:var(--pendo-space-0)!important;background-color:var(--el)!important;border-style:solid!important;border-color:var(--ew)!important;box-shadow:var(--hw)!important;overflow:hidden!important}select._pendo-multi-choice-poll-select option{margin:var(--pendo-space-0)!important;font-family:var(--en)!important;font-weight:var(--eo)!important;font-size:var(--im)!important;letter-spacing:var(--hr)!important;cursor:pointer!important;line-height:var(--es)!important;height:var(--lj)!important;background-color:var(--el)!important;color:var(--em)!important;border-radius:0!important;&::checkmark{display:none!important}&:hover,&:focus{background-color:var(--eq)!important;color:var(--er)!important}&:focus{outline:none!important}&:checked{font-weight:var(--ep)!important;padding-right:calc(var(--et) + var(--lq))!important;background-color:var(--eu)!important;color:var(--ev)!important;border-radius:0!important;position:relative!important;&:after{content:""!important;right:var(--et)!important;width:var(--eb)!important;height:var(--eb)!important;mask-image:var(--is)!important;pointer-events:none!important;background-color:var(--ev)!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(--ei)!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(--fg)!important;font-weight:var(--fi)!important;font-size:var(--fh)!important;line-height:var(--fm)!important;letter-spacing:normal!important;margin:var(--pendo-space-0)!important;background-color:var(--bc)!important;color:var(--fk)!important;font-style:normal!important;&:hover{color:var(--fl)!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(--ff)!important;height:var(--ff)!important;border-radius:var(--fn)!important;border-width:var(--fd)!important;border-style:var(--pendo-input-border-style)!important;margin:var(--gc) var(--fj) var(--pendo-space-0) var(--pendo-space-0)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-color:var(--fa)!important;background-color:var(--ey)!important;&:hover{background-color:var(--ez)!important;border-color:var(--fb)!important}&:checked{box-shadow:var(--fc) inset 0 0 0 var(--fe)!important;border-color:var(--fc)!important;&+label{background:var(--bc)!important;color:var(--fk)!important}}&:focus{&+label{outline:none!important}}}[class$=-poll-question]>._pendo-simple-text>._pendo-text-plain{font-family:var(--di)!important;font-weight:var(--dk)!important;font-size:var(--dj)!important;line-height:var(--dm)!important;letter-spacing:normal!important;margin:var(--dl) var(--pendo-space-0)!important;color:var(--dn)!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(--fx)!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(--fy)!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(--da)!important;min-height:var(--da)!important;width:var(--da)!important;aspect-ratio:1!important;border-width:var(--br)!important;border-radius:var(--bp)!important;border-style:var(--bq)!important;font-size:var(--cz)!important;line-height:var(--da)!important;letter-spacing:var(--bw)!important;font-family:var(--bs)!important;font-weight:var(--bt)!important;text-align:center!important;margin:var(--pendo-space-0)!important;background:var(--cq)!important;border-color:var(--cr)!important;color:var(--cs)!important;outline:var(--ih) var(--if) var(--ia)!important;outline-offset:0!important;transition:var(--ig)!important;&:hover{background:var(--cw)!important;border-color:var(--cx)!important;color:var(--cy)!important}&:active{background:var(--cn)!important;border-color:var(--co)!important;color:var(--cp)!important}}label.pendo-radio[class*=_pendo-number-scale-poll-]+[class$=-description],.pendo-survey-wrapper>:not([id*=survey-single-choice]) label+div{width:var(--da)!important;margin:var(--pendo-space-0)!important;font-weight:var(--ek)!important;line-height:var(--jf)!important;font-size:var(--ej)!important;color:var(--hs)!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(--hx),var(--hz))!important;outline-offset:var(--id)!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(--cc)!important;border-color:var(--cd)!important;color:var(--ce)!important;&:hover{background:var(--ck)!important;border-color:var(--cl)!important;color:var(--cm)!important}&:active{background:var(--bz)!important;border-color:var(--ca)!important;color:var(--cb)!important}}[class$=-poll-question]+._pendo-row [class$=-description]{padding-top:var(--gb)!important;color:var(--hs)!important}}@layer instui.vars;@layer instui.focusOutline{[class*=instui]{--hx:var(--fq);--ia:transparent;--ih:var(--fu);--id:var(--fr);--ie:var(--c);--if:solid;--ig:outline-color .2s, outline-offset .25s;--ib:var(--ft);--hy:var(--fp);--hz:var(--fs);--ic: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(--ih) var(--if) var(--ia)!important;outline-offset:0!important;transition:var(--ig)!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(--hx)!important;outline-offset:var(--id)!important;border-radius:var(--ie)!important}:where(.-focus-color-success):where(:focus-visible){outline-color:var(--ib)!important}:where(.-focus-color-danger):where(:focus-visible){outline-color:var(--hy)!important}:where(.-focus-color-inverse):where(:focus-visible){outline-color:var(--hz)!important}:where(.-focus-position-inset):where(:focus-visible){outline-offset:var(--ic)!important}:where(.-focus-within):where(:focus-within){outline-color:var(--hx)!important;outline-offset:var(--id)!important;border-radius:var(--ie)!important}:where(.-without-focus-animation){transition:none!important}}}
+/*! @pantoken/pendo@0.3.15 */
+@scope([class*=instui]._pendo-step-container){:scope{--nr:#fff;--nn:#0000;--mh:#03893d;--mi:#037d37;--mj:#f2f4f5;--ms:#dfe1e3;--mt:#aab0b5;--mu:#9ea6ad;--mv:#8d959f;--mw:#7e8792;--mk:#6a7883;--ml:#5f6e7a;--mm:#576773;--mn:#4a5b68;--mo:#334450;--mp:#273540;--mq:#1c222b;--mr:#171b21;--me:#accdf7;--mf:#7fb4f1;--mg:#4798e3;--mb:#2b7abc;--mc:#2369a4;--md:#1a5281;--ni:#e62429;--nj:#cf1f24;--nh:#cf4a00;--nq:#f3e5f7;--no:#9e58bd;--np:#522965;--nm:#cff0f6;--nk:#00828e;--nl:#00424a;--my:#eef4fd;--ne:#d5e2f6;--nf:#b6ccea;--ng:#86a8d5;--mz:#2e5177;--na:#234465;--nb:#213d5b;--nc:#1d354f;--nd:#061c30;--ns:#ffffff1a;--nt:#ffffffbf;--mx:#1c222bbf;--oa:.0625rem;--oe:.125rem;--oi:.25rem;--ok:.5rem;--ob:.75rem;--oc:.875rem;--od:1rem;--of:1.25rem;--og:1.5rem;--oh:2rem;--oj:2.5rem;--nv:Inclusive Sans, "Helvetica Neue", Helvetica, Arial, sans-serif;--nu:Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif;--ny:400;--nx:500;--nz:600;--nw: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{--on:var(--oh);--om:var(--oj);--ol:var(--og);--pa:var(--oe);--oz:var(--oi);--ox:var(--ok);--ow:var(--ob);--ov:var(--od);--oy:var(--og);--op:var(--ob);--oo:var(--od);--oq:var(--ok);--os:var(--ok);--or:var(--od);--ou:var(--ok);--ot:var(--ob);--e:var(--oi);--d:var(--ok);--c:var(--ob);--a:var(--od);--b:var(--ob);--h:var(--oa);--g:var(--oe);--f:var(--oa);--kv:var(--nv);--ku:var(--nu);--la:var(--ny);--lb:var(--nz);--lc:var(--nw);--ld:var(--nx);--lt:var(--of);--lw:var(--ob);--lv:var(--od);--kz:var(--ob);--ky:var(--oc);--kw:var(--od);--kx:var(--of);--aa:light-dark(var(--nq),var(--np));--z:light-dark(var(--nm),var(--nl));--w:light-dark(var(--nr),var(--mr));--x:light-dark(var(--nr),var(--mr));--n:light-dark(var(--nc),var(--my));--p:light-dark(var(--na),var(--nr));--m:light-dark(var(--nd),var(--ne));--o:light-dark(var(--ms),var(--mo));--u:light-dark(var(--ms),var(--mo));--r:var(--nr);--t:var(--ne);--q:var(--nf);--s:var(--mv);--v:light-dark(var(--my),var(--mz));--l:var(--ns);--j:var(--no);--i:var(--nk);--k:light-dark(var(--nr),var(--mr));--y:light-dark(var(--nt),var(--mx));--ak:light-dark(var(--mv),var(--mk));--bh:var(--mh);--al:var(--ni);--bi:var(--nh);--am:var(--mb);--bb:light-dark(var(--mb),var(--mg));--bc:var(--nr);--bd:light-dark(var(--mw),var(--ml));--be:light-dark(var(--mo),var(--mw));--bf:var(--mv);--bg:light-dark(var(--mq),var(--nr));--ap:light-dark(var(--nc),var(--my));--ar:light-dark(var(--na),var(--nr));--ao:light-dark(var(--nd),var(--ne));--aq:light-dark(var(--ms),var(--mo));--aw:light-dark(var(--ms),var(--mo));--an:var(--nj);--ba:var(--mi);--at:var(--nr);--av:var(--ne);--as:var(--nf);--au:var(--mv);--ay:var(--nr);--ax:var(--nf);--az:var(--mv);--bj:light-dark(var(--mp),var(--mj));--bv:light-dark(var(--mm),var(--mt));--br:light-dark(var(--mv),var(--mm));--bs:light-dark(var(--mo),var(--mu));--bt:light-dark(var(--ml),var(--mw));--bu:light-dark(var(--md),var(--me));--bq:light-dark(var(--mu),var(--mk));--bk:light-dark(var(--nr),var(--nc));--bl:light-dark(var(--mu),var(--mk));--bn:var(--nb);--bp:var(--nb);--bm:var(--nb);--bo:var(--mn);--ae:var(--nr);--ad:light-dark(var(--mv),var(--mm));--ab:light-dark(#23446526,#0000004d);--ac:light-dark(#2344651a,#00000026);--bw:var(--nn);--ai:light-dark(var(--mp),var(--nr));--aj:light-dark(var(--mc),var(--mf));--af:light-dark(var(--nc),var(--my));--ag:light-dark(var(--nr),var(--nc));--ah:light-dark(var(--nc),var(--nr));--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(--on);--kb:var(--ox);--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(--ow);--jc:var(--ow);--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(--pa);--ik:var(--oz);--ij:var(--ox);--ih:var(--ow);--ig:var(--ov);--id:var(--ow);--if:var(--op);--ie:var(--oo);--in:var(--os);--im:var(--or);--hz:var(--pa);--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(--ox);--hl:var(--f);--hs:var(--ai);--ht:var(--ai);--hn:var(--ol);--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(--ow);--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(--oq);--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(--my));--dx:light-dark(#1d354f,var(--my));--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(--ng));--es:light-dark(#44709f00,var(--ng));--et:var(--ah);--eu:light-dark(#44709f33,var(--ng));--ev:light-dark(#44709f00,var(--ng));--ew:var(--ah);--ex:var(--u);--ey:var(--aw);--ez:var(--bq);--fa:light-dark(#4d7eb333,var(--ng));--fb:light-dark(#44709f00,var(--ng));--fc:var(--ah);--fd:var(--ax);--fe:var(--az);--ff:var(--ky);--dk:var(--om);--fg:var(--on);--fh:var(--ot);--dd:var(--b);--df:var(--ku);--dg:var(--ld);--dh:var(--oz);--fi:light-dark(#1d354f4d,var(--my));--fj:light-dark(#1d354f,var(--my));--fk:light-dark(#c7cacd,var(--mn));--fl:light-dark(#aab0b5,var(--mn));--fm:light-dark(#1d354f33,var(--my));--fn:light-dark(#1d354f,var(--my));--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(--oy);--cx:var(--oy);--cv:var(--ov);--cq:var(--ox);--cs:var(--ow);--ct:var(--ow);--bx:var(--c);--bz:var(--g);--ce:var(--al);--cf:var(--ae);--cg:var(--am);--ch:var(--bh);--ci:var(--bi);--cd:var(--ow);--cc:var(--oy);--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==);--ma:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUzLjAxIDE5Mi42IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0yMjYuMzIgMTU0LjQ4YzAgNy4zNi01Ljk3IDEzLjM2LTEzLjM2IDEzLjM2aC0xNzQuODRjLTcuMzYgMC0xMy4zNi01Ljk3LTEzLjM2LTEzLjM2di0xMTQuNDdjMC03LjM2IDUuOTctMTMuMzYgMTMuMzYtMTMuMzZoMTI3LjYxdi0yNC43NmgtMTMyLjY4Yy0xOC4yNiAwLTMzLjA1IDE0Ljc5LTMzLjA1IDMzLjAxdjEyNC42NWMwIDE4LjI2IDE0Ljc5IDMzLjA1IDMzLjA1IDMzLjA1aDE4NS4wNmMxOC4yNiAwIDMzLjA1LTE0Ljc5IDMzLjA1LTMzLjA1di03Mi4zMWgtMjQuNzZ2NjcuMmwtLjA3LjA0eiIvPjxwYXRoIGQ9Im0yMzguNzIgMjguNThjNy45IDAgMTQuMjktNi4zOSAxNC4yOS0xNC4yOXMtNi4zOS0xNC4yOS0xNC4yOS0xNC4yOS0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjl6Ii8+PHBhdGggZD0ibTE5Ni42NCAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5cy02LjM5LTE0LjI5LTE0LjI5LTE0LjI5LTE0LjI5IDYuMzktMTQuMjkgMTQuMjkgNi4zOSAxNC4yOSAxNC4yOSAxNC4yOXoiLz48cGF0aCBkPSJtMjM4LjcyIDQyLjA5Yy03LjkgMC0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5czYuMzkgMTQuMjkgMTQuMjkgMTQuMjkgMTQuMjktNi4zOSAxNC4yOS0xNC4yOS02LjM5LTE0LjI5LTE0LjI5LTE0LjI5eiIvPjxjaXJjbGUgY3g9Ijc0LjYiIGN5PSIxMTguMTgiIHI9IjI5LjYyIi8+PC9nPjwvc3ZnPg==);--lz:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUxLjQzIDE0Ny42MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzAuNCA4Ni44MmMtMTYuNzkgMC0zMC40IDEzLjYxLTMwLjQgMzAuNCAwIDE2Ljc5IDEzLjYxIDMwLjQgMzAuNCAzMC40czMwLjQtMTMuNjEgMzAuNC0zMC40YzAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PHBhdGggZD0ibTEyNS43MSA4Ni44MmMtMy42NiAwLTcuMTYuNjgtMTAuNDEgMS44N2wtMTguNzctMzQuMmM3LjI0LTUuNTYgMTEuOTItMTQuMjcgMTEuOTItMjQuMSAwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40LTE2Ljc5IDAtMzAuNCAxMy42MS0zMC40IDMwLjRzMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNHMzMC40LTEzLjYxIDMwLjQtMzAuNGMwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40eiIvPjxwYXRoIGQ9Im0yMjEuMDMgODYuODJjLTMuNjYgMC03LjE2LjY4LTEwLjQyIDEuODdsLTE4Ljc3LTM0LjJjNy4yNC01LjU2IDExLjkyLTE0LjI3IDExLjkyLTI0LjEgMC0xNi43OS0xMy42MS0zMC40LTMwLjQtMzAuNHMtMzAuNCAxMy42MS0zMC40IDMwLjQgMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNCAxNi43OSAwIDMwLjQtMTMuNjEgMzAuNC0zMC40IDAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PC9nPjwvc3ZnPg==);--ly:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE1NSIgdmlld0JveD0iMjAzIDAgMTU1IDE1NSIgd2lkdGg9IjE1NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzIwLjI0IDEzMS4yN2MtMjMuMjUgMTcuMTctNTQuOTQgMTcuMzMtNzguMzcuNDFsMy40Mi00LjcyYy0yMS41Ni0xNS40NS0zMC42Ni00My4wNC0yMi41Mi02OC4yN2w1LjU1IDEuMDVjNy42NS0yMi42IDI4LjktMzcuNzcgNTIuNzgtMzcuNjl2LTIyLjA1Yy0zMy42LjA0LTYzLjM1IDIxLjY5LTczLjcgNTMuNjNzMS4wNiA2Ni45MSAyOC4yNiA4Ni42MWMyNy4yIDE5LjcxIDY0IDE5LjY3IDkxLjE3LS4wOCAyNy4xNi0xOS43NiAzOC41MS01NC43NCAyOC4xLTg2LjY2bC01LjExIDEuNjZjOS44OSAyOS44LS42MSA2Mi41Ni0yNS45OSA4MS4wNyIvPjxwYXRoIGQ9Im0zMjAuMjQgMTMxLjI3Yy0yMy4yNSAxNy4xNy01NC45NCAxNy4zMy03OC4zNy40MWwzLjQyLTQuNzJjLTIxLjU2LTE1LjQ1LTMwLjY2LTQzLjA0LTIyLjUyLTY4LjI3bDUuNTUgMS4wNWM3LjY1LTIyLjYgMjguOS0zNy43NyA1Mi43OC0zNy42OXYtMjIuMDVjLTMzLjYuMDQtNjMuMzUgMjEuNjktNzMuNyA1My42M3MxLjA2IDY2LjkxIDI4LjI2IDg2LjYxYzI3LjIgMTkuNzEgNjQgMTkuNjcgOTEuMTctLjA4IDI3LjE2LTE5Ljc2IDM4LjUxLTU0Ljc0IDI4LjEtODYuNjZsLTUuMTEgMS42NmM5Ljg5IDI5LjgtLjYxIDYyLjU2LTI1Ljk5IDgxLjA3Ii8+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;&+.pendo-tooltip-caret-border{bottom:calc(4px + var(--ie) - 15px)!important}}&.pendo-tooltip-caret--right{border-right-color:var(--caret-color)!important;left:-3px!important;&+.pendo-tooltip-caret-border{left:-4px!important}}&.pendo-tooltip-caret--bottom{border-bottom:16px solid var(--caret-color)!important;top:calc(var(--ik) - 14px)!important;&+.pendo-tooltip-caret-border{top:calc(var(--ik) - 15px)!important}}&.pendo-tooltip-caret--left{border-left-color:var(--caret-color)!important;right:-3px!important;&+.pendo-tooltip-caret-border{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;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(--ma)}&[class*=-mastery]{--_banner-glyph:var(--lz)}&[class*=-learnplatform]{--_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;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}}}}:is(:scope[class*=instui-alert],[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(--pa)!important;margin-left:var(--pa)!important;max-width:var(--pendo-embedded-width)!important}& ._pendo-step-container-size{z-index:300000!important;padding-bottom:calc(var(--ow))!important;padding-top:var(--ox)!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(--ow)!important;margin-left:var(--ov)!important;margin-right:var(--ov)!important;margin-top:var(--oz)!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-top:var(--pendo-space-0)!important;margin-right:var(--pendo-space-0)!important;margin-bottom:var(--ij)!important;margin-left:var(--pendo-space-0)!important;line-height:var(--pendo-space-0)!important}[data-layout=lightboxBlank] ._pendo-row{margin-top:var(--pendo-space-0)!important;margin-right:var(--pendo-space-0)!important;margin-bottom:var(--if)!important;margin-left:var(--pendo-space-0)!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}& ._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(--on)!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(--ou))!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}}}

package/dist/index.d.mts

@@ -6,7 +6,7 @@ import { Theme } from "@pantoken/model";
 interface BuildPendoCssOptions {
   /** Theme to source the `--instui-*` layer from (default `"rebrand"`). */
   theme?: Theme;
-  /** The `@scope` root selector (default `._pendo-step-container`). */
+  /** The `@scope` root selector (default `[class*="instui"]._pendo-step-container`). */
   scopeSelector?: string;
   /** Wrap component rules in `@scope` for DOM containment (default `true`). */
   scope?: boolean;
@@ -48,7 +48,7 @@ interface BuildPendoCssOptions {
  * const css = buildPendoCss({ theme: "canvas", scope: false, prune: false });
  * ```
  */
-declare function buildPendoCss(options?: BuildPendoCssOptions): string;
+export declare function buildPendoCss(options?: BuildPendoCssOptions): string;
 //#endregion
 //#region src/plugins/add-important.d.ts
 /**
@@ -63,7 +63,7 @@ declare function buildPendoCss(options?: BuildPendoCssOptions): string;
  * // ".x{color:red !important}"
  * ```
  */
-declare const addImportant: {
+export declare const addImportant: {
   (): Plugin;
   /** Required PostCSS plugin marker. */
   postcss: true;
@@ -72,7 +72,7 @@ declare const addImportant: {
 //#region src/plugins/add-scope.d.ts
 /** Options for {@link addScope}. */
 interface AddScopeOptions {
-  /** The scope root selector (default `._pendo-step-container`). */
+  /** The scope root selector (default `[class*="instui"]._pendo-step-container`). */
   selector?: string;
 }
 /**
@@ -85,10 +85,10 @@ interface AddScopeOptions {
  *
  * const { css } = postcss([addScope({ selector: "._pendo-step-container" })])
  *   .process(".x{color:red}", { from: undefined });
- * // "@scope (._pendo-step-container) { .x{color:red} }"
+ * // "@scope ([class*=\"instui\"]._pendo-step-container) { .x{color:red} }"
  * ```
  */
-declare const addScope: {
+export declare const addScope: {
   (options?: AddScopeOptions): Plugin;
   /** Required PostCSS plugin marker. */
   postcss: true;
@@ -99,17 +99,17 @@ declare const addScope: {
  * Cascade order (lowest → highest). Layered `!important` beats Pendo's
  * own unlayered `!important`, so guide styles stay on top.
  */
-declare const LAYER_ORDER: readonly ["tokens", "elevation", "container", "card", "text", "chrome", "button", "inputs", "vars", "focusOutline"];
+export declare const LAYER_ORDER: readonly ["tokens", "elevation", "container", "card", "text", "chrome", "button", "inputs", "vars", "focusOutline"];
 /** A component's authored CSS and the cascade layer it belongs in. */
 interface ComponentLayer {
   layer: (typeof LAYER_ORDER)[number];
   css: string;
 }
 /** The component CSS in cascade order (the `tokens` and `vars` layers are handled separately). */
-declare const COMPONENTS: readonly ComponentLayer[];
+export declare const COMPONENTS: readonly ComponentLayer[];
 //#endregion
 //#region src/index.d.ts
 /** The ready-made `rebrand` Pendo guide stylesheet (scoped, `!important`). */
-declare const pendoCss: string;
+export declare const pendoCss: string;
 //#endregion
-export { type AddScopeOptions, type BuildPendoCssOptions, COMPONENTS, LAYER_ORDER, addImportant, addScope, buildPendoCss, pendoCss as default, pendoCss };
+export { type AddScopeOptions, type BuildPendoCssOptions, pendoCss as default };

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 *   The last button in a `.pendo-mock-flexbox-element` row loses its trailing margin automatically.\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[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-component-base-button-border-width);\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) var(--instui-component-base-button-gap-button-content-md)\n      var(--pendo-space-0) var(--pendo-space-0);\n\n    .pendo-mock-flexbox-element:last-child > & {\n      margin-right: var(--pendo-space-0);\n    }\n  }\n\n  /* Primary/Custom button variant */\n  ._pendo-button-primaryButton,\n  ._pendo-button-custom {\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    &: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-color-stroke-interactive-action-tertiary-base);\n    color: var(--instui-color-text-interactive-action-tertiary-base);\n\n    &:hover {\n      background: var(--instui-color-background-interactive-action-tertiary-hover);\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-color-background-interactive-action-tertiary-active);\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";
-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-top: var(--pendo-space-0);\n  margin-right: var(--pendo-space-0);\n  margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-sm);\n  margin-left: var(--pendo-space-0);\n  line-height: var(--pendo-space-0);\n}\n\n/* Row spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] ._pendo-row {\n  margin-top: var(--pendo-space-0);\n  margin-right: var(--pendo-space-0);\n  margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n  margin-left: var(--pendo-space-0);\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=\"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  padding-bottom: var(--instui-component-shared-tokens-spacing-general-space-xs);\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  background-repeat: no-repeat;\n  background-position: center;\n  border-width: var(--pendo-space-0);\n  background-size: var(--instui-component-icon-size-sm);\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: var(--instui-font-size-text-lg);\n  font-family: var(--instui-component-base-button-font-family);\n  font-weight: var(--instui-primitive-font-weight-medium);\n  color: var(--instui-component-text-base-color);\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\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";
-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 [class*=\"instui-info\"] info — Informational colour variant (alert only).\n * @modifier [class*=\"instui-danger\"] danger — Danger/error colour variant (alert only).\n * @modifier [class*=\"instui-success\"] success — Success colour variant (alert only).\n * @modifier [class*=\"instui-warning\"] warning — Warning colour variant (alert only).\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 * @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[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-color: 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-color: 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) - 15px);\n\n      & + .pendo-tooltip-caret-border {\n        bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 16px);\n      }\n    }\n\n    &.pendo-tooltip-caret--right {\n      border-right-color: var(--caret-color);\n      left: -3px;\n\n      & + .pendo-tooltip-caret-border {\n        left: -4px;\n      }\n    }\n\n    &.pendo-tooltip-caret--bottom {\n      border-bottom-color: 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) - 15px);\n\n      & + .pendo-tooltip-caret-border {\n        top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 16px);\n      }\n    }\n\n    &.pendo-tooltip-caret--left {\n      border-left-color: var(--caret-color);\n      right: -3px;\n\n      & + .pendo-tooltip-caret-border {\n        right: -4px;\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        var(--instui-component-shared-tokens-spacing-padding-card-sm) var(--pendo-space-0);\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/* ─── Embedded alert ─── */\n\n[class*=\"instui\"][data-layout=\"lightboxBlank\"] {\n  /* Variant tokens — set on the container, inherited by all children */\n  &,\n  &[class*=\"instui-info\"] {\n    --_alert-color: var(--instui-component-alert-info-border-color);\n    --_alert-icon: var(--instui-icon-info);\n  }\n\n  &[class*=\"instui-danger\"] {\n    --_alert-color: var(--instui-component-alert-danger-border-color);\n    --_alert-icon: var(--instui-icon-circle-x);\n  }\n\n  &[class*=\"instui-success\"] {\n    --_alert-color: var(--instui-component-alert-success-border-color);\n    --_alert-icon: var(--instui-icon-circle-check);\n  }\n\n  &[class*=\"instui-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-general-space-md);\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-component-base-button-border-width);\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/* Tooltip (popover) heading overrides */\n[data-layout=\"tooltipBlank\"] {\n  h2._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-regular-font-size);\n    line-height: var(--instui-component-heading-title-card-mini-line-height);\n  }\n\n  h3._pendo-simple-text {\n    font-size: var(--instui-component-heading-title-card-mini-font-size);\n    line-height: var(--instui-component-heading-title-card-regular-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";
+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\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-top: var(--pendo-space-0);\n  margin-right: var(--pendo-space-0);\n  margin-bottom: var(--instui-component-shared-tokens-spacing-general-space-sm);\n  margin-left: var(--pendo-space-0);\n  line-height: var(--pendo-space-0);\n}\n\n/* Row spacing in Alert layout */\n[data-layout=\"lightboxBlank\"] ._pendo-row {\n  margin-top: var(--pendo-space-0);\n  margin-right: var(--pendo-space-0);\n  margin-bottom: var(--instui-component-shared-tokens-spacing-gap-cards-sm);\n  margin-left: var(--pendo-space-0);\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\n      & + .pendo-tooltip-caret-border {\n        bottom: calc(4px + var(--instui-component-shared-tokens-spacing-gap-cards-md) - 15px);\n      }\n    }\n\n    &.pendo-tooltip-caret--right {\n      border-right-color: var(--caret-color);\n      left: -3px;\n\n      & + .pendo-tooltip-caret-border {\n        left: -4px;\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\n      & + .pendo-tooltip-caret-border {\n        top: calc(var(--instui-component-shared-tokens-spacing-general-space-xs) - 15px);\n      }\n    }\n\n    &.pendo-tooltip-caret--left {\n      border-left-color: var(--caret-color);\n      right: -3px;\n\n      & + .pendo-tooltip-caret-border {\n        right: -4px;\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\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\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\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:is(:scope[class*=\"instui-alert\"], [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";
 //#endregion
 //#region src/layers.ts
 /**
@@ -28,7 +28,46 @@ const textCss = "/**\n * @component pendo-text\n * @selector [class*=\"instui\"]
 * @module
 */
 /** The `--pendo-*` local aliases, override tokens, and logo references. */
-const PENDO_VARS_CSS = "/**\n * @component pendo-vars\n * @selector [class*=\"instui\"]\n * @summary Local CSS custom properties for Pendo guide layout constants and upstream token gaps.\n * @remarks All properties are scoped to `[class*=\"instui\"]` and consumed by the other pendo CSS files.\n *   `--pendo-space-0` aliases the upstream zero-spacing sentinel to avoid repeating the full token path.\n *   `--pendo-input-border-style` fills a gap where the upstream set does not yet supply a `border-style`\n *   token for text inputs and text areas.\n * @cssproperty --pendo-embedded-width <length> — Max-width of the embedded (lightboxBlank) guide container.\n * @cssproperty --pendo-alert-indent <length> — Width of the alert's coloured sidebar strip.\n * @cssproperty --pendo-overlay-width <length> — Max-width of the overlay (tooltipBlank) guide container.\n * @cssproperty --pendo-space-0 <length> — Zero-spacing alias; maps to the upstream `space-none` token.\n * @cssproperty --pendo-input-border-style <custom-ident> — Border-style fallback for inputs (`solid`); remove when the upstream token ships.\n * @cssproperty --instui-component-text-area-min-height <length> — TextArea floor height; no upstream token yet.\n * @cssproperty --instui-component-text-area-max-height <length> — TextArea ceiling height; no upstream token yet.\n * @cssproperty --instui-component-text-area-max-width <length> — TextArea max-width; no upstream token yet.\n */\n[class*=\"instui\"] {\n  /* Embedded guide max-width (lightboxBlank layout) */\n  --pendo-embedded-width: 59.25rem;\n  /* Alert sidebar strip width */\n  --pendo-alert-indent: 2.5rem;\n  /* Overlay/popover guide max-width (tooltipBlank layout) */\n  --pendo-overlay-width: 22.5rem;\n  /* Shorthand for the zero-spacing sentinel */\n  --pendo-space-0: var(--instui-component-shared-tokens-spacing-general-space-none);\n  /* Workaround: --instui-component-text-input/text-area-border-style not yet in upstream token set */\n  --pendo-input-border-style: solid;\n\n  /* TextArea: clamp to pendo-specific dimensions not in upstream tokens */\n  --instui-component-text-area-min-height: 4rem;\n  --instui-component-text-area-max-height: 6rem;\n  --instui-component-text-area-max-width: 20rem;\n}\n";
+const PENDO_VARS_CSS = `/**
+ * @component pendo-vars
+ * @selector [class*="instui"]
+ * @summary Local CSS custom properties for Pendo guide layout constants and upstream token gaps.
+ * @remarks All properties are scoped to \`[class*="instui"]\` and consumed by the other pendo CSS files.
+ *   \`--pendo-space-0\` aliases the upstream zero-spacing sentinel to avoid repeating the full token path.
+ *   \`--pendo-input-border-style\` fills a gap where the upstream set does not yet supply a \`border-style\`
+ *   token for text inputs and text areas.
+ * @cssproperty --pendo-embedded-width <length> — Max-width of the embedded (lightboxBlank) guide container.
+ * @cssproperty --pendo-alert-indent <length> — Width of the alert's coloured sidebar strip.
+ * @cssproperty --pendo-overlay-width <length> — Max-width of the overlay (tooltipBlank) guide container.
+ * @cssproperty --pendo-space-0 <length> — Zero-spacing alias; maps to the upstream \`space-none\` token.
+ * @cssproperty --pendo-input-border-style <custom-ident> — Border-style fallback for inputs (\`solid\`); remove when the upstream token ships.
+ * @cssproperty --instui-component-text-area-min-height <length> — TextArea floor height; no upstream token yet.
+ * @cssproperty --instui-component-text-area-max-height <length> — TextArea ceiling height; no upstream token yet.
+ * @cssproperty --instui-component-text-area-max-width <length> — TextArea max-width; no upstream token yet.
+ */
+[class*="instui"] {
+  /* Embedded guide max-width (lightboxBlank layout) */
+  --pendo-embedded-width: 59.25rem;
+  /* Alert sidebar strip width */
+  --pendo-alert-indent: 2.5rem;
+  /* Overlay/popover guide max-width (tooltipBlank layout) */
+  --pendo-overlay-width: 22.5rem;
+  /* Shorthand for the zero-spacing sentinel */
+  --pendo-space-0: var(--instui-component-shared-tokens-spacing-general-space-none);
+  /* Workaround: --instui-component-text-input/text-area-border-style not yet in upstream token set */
+  --pendo-input-border-style: solid;
+
+  /* TextArea: clamp to pendo-specific dimensions not in upstream tokens */
+  --instui-component-text-area-min-height: 4rem;
+  --instui-component-text-area-max-height: 6rem;
+  --instui-component-text-area-max-width: 20rem;
+}
+\n[class*="instui"] {
+  --instui-logo-canvas-icon-reversed: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjcxLjcxIDI3MS44IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0zOS40MiAxMzUuNjFjLS4wMi0xOS44My0xNC44MS0zNi41NC0zNC40OS0zOC45Ny02LjU4IDI1LjU2LTYuNTggNTIuMzcgMCA3Ny45MiAxOS42OC0yLjQyIDM0LjQ3LTE5LjEyIDM0LjQ5LTM4Ljk1Ii8+PHBhdGggZD0ibTYyLjI0IDEyMy4yOGMtNi44MSAwLTEyLjMzIDUuNTItMTIuMzMgMTIuMzNzNS41MiAxMi4zMyAxMi4zMyAxMi4zMyAxMi4zMy01LjUyIDEyLjMzLTEyLjMzYzAtNi44MS01LjUyLTEyLjMzLTEyLjMzLTEyLjMzeiIvPjxwYXRoIGQ9Im0yMzIuMjkgMTM1LjYxYy4wMSAxOS44MyAxNC44MSAzNi41MyAzNC40OSAzOC45NSA2LjU4LTI1LjU2IDYuNTgtNTIuMzcgMC03Ny45Mi0xOS42OCAyLjQ0LTM0LjQ2IDE5LjE0LTM0LjQ5IDM4Ljk3Ii8+PHBhdGggZD0ibTIwOS4zOSAxMjMuMjhjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAgMCAwLS4wMSAwLS4wMiAwLTYuOC01LjUxLTEyLjMyLTEyLjMxLTEyLjMzIi8+PHBhdGggZD0ibTEzNS41OSAyMzIuNGMtMTkuODIuMDItMzYuNTIgMTQuOC0zOC45NSAzNC40NiAyNS41NiA2LjU4IDUyLjM3IDYuNTggNzcuOTIgMC0yLjQzLTE5LjY4LTE5LjE0LTM0LjQ2LTM4Ljk3LTM0LjQ2Ii8+PHBhdGggZD0ibTEzNS42MSAxOTcuMjNjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAgMCAwLS4wMSAwLS4wMiAwLTYuOC01LjUxLTEyLjMyLTEyLjMxLTEyLjMzIi8+PHBhdGggZD0ibTEzNS42MSAzOS40YzE5LjgyIDAgMzYuNTMtMTQuNzkgMzguOTUtMzQuNDYtMjUuNTYtNi41OC01Mi4zNy02LjU4LTc3LjkyIDAgMi40NCAxOS42NyAxOS4xNSAzNC40NSAzOC45NyAzNC40NiIvPjxwYXRoIGQ9Im0xMzUuNjEgNDkuOTNjLTYuODEtLjAxLTEyLjM0IDUuNS0xMi4zNSAxMi4zMXM1LjUgMTIuMzQgMTIuMzEgMTIuMzUgMTIuMzQtNS41IDEyLjM1LTEyLjMxYzAtLjAxIDAtLjAzIDAtLjA0IDAtNi44LTUuNTEtMTIuMzEtMTIuMzEtMTIuMzF6Ii8+PHBhdGggZD0ibTIwMy45MiAyMDMuOTJjLTEzLjk5IDE0LjAyLTE1LjM2IDM2LjI2LTMuMiA1MS45IDIyLjczLTEzLjQxIDQxLjY4LTMyLjM3IDU1LjA4LTU1LjEtMTUuNjMtMTIuMTYtMzcuODYtMTAuNzgtNTEuODggMy4yIi8+PHBhdGggZD0ibTE3OS4wNSAxNzkuMDVjLTQuODEgNC44MS00LjgxIDEyLjYyIDAgMTcuNDNzMTIuNjIgNC44MSAxNy40MyAwIDQuODEtMTIuNjIgMC0xNy40M2MtNC44Mi00LjgtMTIuNjItNC44LTE3LjQzIDAiLz48cGF0aCBkPSJtNjcuNSA2Ny41YzE0LjAxLTE0IDE1LjM5LTM2LjI2IDMuMi01MS44OC0yMi43MyAxMy40LTQxLjY4IDMyLjM1LTU1LjA4IDU1LjA4IDE1LjYyIDEyLjE4IDM3Ljg3IDEwLjgxIDUxLjg4LTMuMiIvPjxwYXRoIGQ9Im03NC45MyA3NC45NWMtNC44MSA0LjgxLTQuODEgMTIuNjIgMCAxNy40M3MxMi42MiA0LjgxIDE3LjQzIDAgNC44MS0xMi42MiAwLTE3LjQzYy00LjgyLTQuOC0xMi42Mi00LjgtMTcuNDMgMCIvPjxwYXRoIGQ9Im0yMDMuODMgNjcuMzdjMTQuMDMgMTMuOTggMzYuMjggMTUuMzMgNTEuOSAzLjE0LTEzLjQxLTIyLjcxLTMyLjM3LTQxLjY0LTU1LjEtNTUuMDItMTIuMTYgMTUuNjMtMTAuNzggMzcuODYgMy4yIDUxLjg4Ii8+PHBhdGggZD0ibTE5Ni40IDkyLjI0YzQuOC00LjgxIDQuOC0xMi42IDAtMTcuNC00LjgxLTQuOC0xMi42LTQuOC0xNy40IDAtNC44IDQuODEtNC44IDEyLjU5IDAgMTcuNHMxMi42IDQuODEgMTcuNCAweiIvPjxwYXRoIGQ9Im02Ny40MyAyMDMuNzdjLTE0LjAxLTEzLjk5LTM2LjI1LTE1LjM2LTUxLjg4LTMuMiAxMy40IDIyLjczIDMyLjM2IDQxLjY5IDU1LjA4IDU1LjEgMTIuMTgtMTUuNjMgMTAuOC0zNy44OC0zLjItNTEuOSIvPjxwYXRoIGQ9Im03NC43OCAxNzguOWMtNC44MSA0LjgxLTQuODEgMTIuNjIgMCAxNy40M3MxMi42MiA0LjgxIDE3LjQzIDAgNC44MS0xMi42MiAwLTE3LjQzYy00LjgyLTQuNzktMTIuNjEtNC43OS0xNy40MyAwIi8+PC9nPjwvc3ZnPg==");
+  --instui-logo-parchment-icon-reversed: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUzLjAxIDE5Mi42IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNmZmYiPjxwYXRoIGQ9Im0yMjYuMzIgMTU0LjQ4YzAgNy4zNi01Ljk3IDEzLjM2LTEzLjM2IDEzLjM2aC0xNzQuODRjLTcuMzYgMC0xMy4zNi01Ljk3LTEzLjM2LTEzLjM2di0xMTQuNDdjMC03LjM2IDUuOTctMTMuMzYgMTMuMzYtMTMuMzZoMTI3LjYxdi0yNC43NmgtMTMyLjY4Yy0xOC4yNiAwLTMzLjA1IDE0Ljc5LTMzLjA1IDMzLjAxdjEyNC42NWMwIDE4LjI2IDE0Ljc5IDMzLjA1IDMzLjA1IDMzLjA1aDE4NS4wNmMxOC4yNiAwIDMzLjA1LTE0Ljc5IDMzLjA1LTMzLjA1di03Mi4zMWgtMjQuNzZ2NjcuMmwtLjA3LjA0eiIvPjxwYXRoIGQ9Im0yMzguNzIgMjguNThjNy45IDAgMTQuMjktNi4zOSAxNC4yOS0xNC4yOXMtNi4zOS0xNC4yOS0xNC4yOS0xNC4yOS0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5IDYuMzkgMTQuMjkgMTQuMjkgMTQuMjl6Ii8+PHBhdGggZD0ibTE5Ni42NCAyOC41OGM3LjkgMCAxNC4yOS02LjM5IDE0LjI5LTE0LjI5cy02LjM5LTE0LjI5LTE0LjI5LTE0LjI5LTE0LjI5IDYuMzktMTQuMjkgMTQuMjkgNi4zOSAxNC4yOSAxNC4yOSAxNC4yOXoiLz48cGF0aCBkPSJtMjM4LjcyIDQyLjA5Yy03LjkgMC0xNC4yOSA2LjM5LTE0LjI5IDE0LjI5czYuMzkgMTQuMjkgMTQuMjkgMTQuMjkgMTQuMjktNi4zOSAxNC4yOS0xNC4yOS02LjM5LTE0LjI5LTE0LjI5LTE0LjI5eiIvPjxjaXJjbGUgY3g9Ijc0LjYiIGN5PSIxMTguMTgiIHI9IjI5LjYyIi8+PC9nPjwvc3ZnPg==");
+  --instui-logo-mastery-icon-reversed: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjUxLjQzIDE0Ny42MiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzAuNCA4Ni44MmMtMTYuNzkgMC0zMC40IDEzLjYxLTMwLjQgMzAuNCAwIDE2Ljc5IDEzLjYxIDMwLjQgMzAuNCAzMC40czMwLjQtMTMuNjEgMzAuNC0zMC40YzAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PHBhdGggZD0ibTEyNS43MSA4Ni44MmMtMy42NiAwLTcuMTYuNjgtMTAuNDEgMS44N2wtMTguNzctMzQuMmM3LjI0LTUuNTYgMTEuOTItMTQuMjcgMTEuOTItMjQuMSAwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40LTE2Ljc5IDAtMzAuNCAxMy42MS0zMC40IDMwLjRzMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNHMzMC40LTEzLjYxIDMwLjQtMzAuNGMwLTE2Ljc5LTEzLjYxLTMwLjQtMzAuNC0zMC40eiIvPjxwYXRoIGQ9Im0yMjEuMDMgODYuODJjLTMuNjYgMC03LjE2LjY4LTEwLjQyIDEuODdsLTE4Ljc3LTM0LjJjNy4yNC01LjU2IDExLjkyLTE0LjI3IDExLjkyLTI0LjEgMC0xNi43OS0xMy42MS0zMC40LTMwLjQtMzAuNHMtMzAuNCAxMy42MS0zMC40IDMwLjQgMTMuNjEgMzAuNCAzMC40IDMwLjRjMy42NiAwIDcuMTYtLjY4IDEwLjQxLTEuODdsMTguNzcgMzQuMmMtNy4yNCA1LjU2LTExLjkyIDE0LjI3LTExLjkyIDI0LjEgMCAxNi43OSAxMy42MSAzMC40IDMwLjQgMzAuNCAxNi43OSAwIDMwLjQtMTMuNjEgMzAuNC0zMC40IDAtMTYuNzktMTMuNjEtMzAuNC0zMC40LTMwLjR6Ii8+PC9nPjwvc3ZnPg==");
+  --instui-logo-learnplatform-icon-reversed: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE1NSIgdmlld0JveD0iMjAzIDAgMTU1IDE1NSIgd2lkdGg9IjE1NSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJtMzIwLjI0IDEzMS4yN2MtMjMuMjUgMTcuMTctNTQuOTQgMTcuMzMtNzguMzcuNDFsMy40Mi00LjcyYy0yMS41Ni0xNS40NS0zMC42Ni00My4wNC0yMi41Mi02OC4yN2w1LjU1IDEuMDVjNy42NS0yMi42IDI4LjktMzcuNzcgNTIuNzgtMzcuNjl2LTIyLjA1Yy0zMy42LjA0LTYzLjM1IDIxLjY5LTczLjcgNTMuNjNzMS4wNiA2Ni45MSAyOC4yNiA4Ni42MWMyNy4yIDE5LjcxIDY0IDE5LjY3IDkxLjE3LS4wOCAyNy4xNi0xOS43NiAzOC41MS01NC43NCAyOC4xLTg2LjY2bC01LjExIDEuNjZjOS44OSAyOS44LS42MSA2Mi41Ni0yNS45OSA4MS4wNyIvPjxwYXRoIGQ9Im0zMjAuMjQgMTMxLjI3Yy0yMy4yNSAxNy4xNy01NC45NCAxNy4zMy03OC4zNy40MWwzLjQyLTQuNzJjLTIxLjU2LTE1LjQ1LTMwLjY2LTQzLjA0LTIyLjUyLTY4LjI3bDUuNTUgMS4wNWM3LjY1LTIyLjYgMjguOS0zNy43NyA1Mi43OC0zNy42OXYtMjIuMDVjLTMzLjYuMDQtNjMuMzUgMjEuNjktNzMuNyA1My42M3MxLjA2IDY2LjkxIDI4LjI2IDg2LjYxYzI3LjIgMTkuNzEgNjQgMTkuNjcgOTEuMTctLjA4IDI3LjE2LTE5Ljc2IDM4LjUxLTU0Ljc0IDI4LjEtODYuNjZsLTUuMTEgMS42NmM5Ljg5IDI5LjgtLjYxIDYyLjU2LTI1Ljk5IDgxLjA3Ii8+PC9nPjwvc3ZnPg==");
+}`;
 /**
 * Cascade order (lowest → highest). Layered `!important` beats Pendo's
 * own unlayered `!important`, so guide styles stay on top.
@@ -108,11 +147,11 @@ const addImportant = Object.assign(function addImportant() {
 *
 * const { css } = postcss([addScope({ selector: "._pendo-step-container" })])
 *   .process(".x{color:red}", { from: undefined });
-* // "@scope (._pendo-step-container) { .x{color:red} }"
+* // "@scope ([class*=\"instui\"]._pendo-step-container) { .x{color:red} }"
 * ```
 */
 const addScope = Object.assign(function addScope(options = {}) {
-	const selector = options.selector ?? "._pendo-step-container";
+	const selector = options.selector ?? "[class*=\"instui\"]._pendo-step-container";
 	return {
 		postcssPlugin: "pendo-add-scope",
 		OnceExit(root, { AtRule }) {
@@ -157,14 +196,13 @@ const GUIDE_SELECTOR = "[class*=\"instui\"]";
 */
 const FOCUSABLES = "._pendo-button, ._pendo-close-guide, ._pendo-text-link, select._pendo-multi-choice-poll-select, ._pendo-open-text-poll-input, input.pendo-radio";
 /** Build the `instui.elevation` layer: the named `--instui-elevation-*` box-shadow custom props. */
-function elevationLayer() {
-	return `@layer instui.elevation {\n${elevationCss({ selector: GUIDE_SELECTOR })}}`;
+function elevationLayer(selector) {
+	return `@layer instui.elevation {\n${elevationCss({ selector })}}`;
 }
 /** Build the `instui.focusOutline` layer: the `--instui-focus-outline-*` token defs + the ring rules
 *  (from `@pantoken/components`), scoped to Pendo's focusables. */
-function focusLayer() {
-	const decls = focusOutlineDeclarations().map(([n, v]) => `  ${n}: ${v};`).join("\n");
-	return `@layer instui.focusOutline {\n${GUIDE_SELECTOR} {\n${decls}\n}\n\n${focusOutlineRules(FOCUSABLES)}\n}`;
+function focusLayer(selector) {
+	return `@layer instui.focusOutline {\n${selector} {\n${focusOutlineDeclarations().map(([n, v]) => `  ${n}: ${v};`).join("\n")}\n}\n\n${focusOutlineRules(FOCUSABLES)}\n}`;
 }
 /**
 * Build the Pendo guide stylesheet.
@@ -187,12 +225,14 @@ function focusLayer() {
 * ```
 */
 function buildPendoCss(options = {}) {
-	const { theme = "rebrand", scopeSelector = "._pendo-step-container", scope = true, important = true, prune = true, flatten = false, mangle = false } = options;
-	const tokenCss = toCss(byTheme(theme), { scope: GUIDE_SELECTOR });
+	const { theme = "rebrand", scopeSelector = "[class*=\"instui\"]._pendo-step-container", scope = true, important = true, prune = true, flatten = false, mangle = false } = options;
+	const rootSelector = scope ? ":scope" : GUIDE_SELECTOR;
+	const tokenCss = toCss(byTheme(theme), { scope: rootSelector });
 	const order = `@layer ${LAYER_ORDER.map((l) => `instui.${l}`).join(", ")};`;
-	const tokenLayer = `@layer instui.tokens {\n${tokenCss}\n\n${PENDO_VARS_CSS}\n}`;
+	const tokenLayer = `@layer instui.tokens {\n${tokenCss}\n\n${scope ? PENDO_VARS_CSS.replaceAll(GUIDE_SELECTOR, ":scope") : PENDO_VARS_CSS}\n}`;
 	const components = COMPONENTS.map((c) => `@layer instui.${c.layer} {\n${c.css}\n}`).join("\n\n");
-	const full = `${order}\n\n${tokenLayer}\n\n${elevationLayer()}\n\n${components}\n\n${focusLayer()}`;
+	const scopedComponents = scope ? components : components.replaceAll(":scope", ":not(*)");
+	const full = `${order}\n\n${tokenLayer}\n\n${elevationLayer(rootSelector)}\n\n${scopedComponents}\n\n${focusLayer(rootSelector)}`;
 	const plugins = [];
 	if (important) plugins.push(addImportant());
 	if (prune) plugins.push(pruneCustomProps());
@@ -210,8 +250,11 @@ function buildPendoCss(options = {}) {
 * `@pantoken/pendo` — an Instructure-styled global stylesheet for Pendo guides.
 *
 * Pendo injects guide HTML into a host page; this renders that guide DOM (`._pendo-*`) to match
-* Instructure UI, using pantoken's `--instui-*` token layer for alignment. The component CSS is
-* ported from `@instructure/pendo-global-css`; pantoken supplies the tokens and the assembly.
+* Instructure UI, using pantoken's `--instui-*` token layer for alignment. It includes responsive
+* 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.
 *
 * {@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`.
@@ -222,6 +265,8 @@ function buildPendoCss(options = {}) {
 * // or a variant: buildPendoCss({ theme: "canvas", scope: false })
 * ```
 *
+* @demo self:pendo
+*
 * @module
 * @beta
 */

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pantoken/pendo",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "description": "Instructure-styled global CSS for Pendo guides, built on pantoken tokens (ported from @instructure/pendo-global-css).",
-  "homepage": "https://pantoken.iywahl.com",
+  "homepage": "https://pantoken.app",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",
   "license": "MIT",
   "repository": {
@@ -27,19 +27,20 @@
     "provenance": true
   },
   "dependencies": {
-    "@pantoken/components": "1.0.3",
-    "@pantoken/css": "0.3.7",
-    "@pantoken/model": "0.3.1",
-    "@pantoken/plugin-props-minify": "0.1.3",
-    "@pantoken/tokens": "0.3.0",
-    "postcss": "^8.5.26"
+    "@pantoken/components": "1.1.1",
+    "@pantoken/css": "0.3.9",
+    "@pantoken/model": "0.3.2",
+    "@pantoken/plugin-props-minify": "0.1.4",
+    "@pantoken/tokens": "0.3.2",
+    "postcss": "^8.5.28"
   },
   "devDependencies": {
-    "@pantoken/utils": "1.0.1",
-    "@types/node": "^26.3.0",
+    "@pantoken/plugin-logos": "0.4.0",
+    "@pantoken/utils": "1.0.2",
+    "@types/node": "^26.5.0",
     "typescript": "^7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.0",
-    "vite-plus": "0.3.0"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1",
+    "vite-plus": "0.3.1"
   },
   "engines": {
     "node": ">=22.18.0"
@@ -52,7 +53,7 @@
     "embed": "node scripts/embed.ts",
     "generate": "node scripts/generate.ts",
     "dev": "vp run embed && vp run generate && vp pack --watch",
-    "test": "vp run embed && vp test",
+    "test": "vp run embed && vp run generate && vp test",
     "check": "vp check"
   }
 }