.react-live .prism-code{background:#000;box-sizing:border-box;color:#eaeaea;font-size:1rem;line-height:1.4;margin:0;padding:24px}.design__playground{margin:-24px}@media (min-width:961px){.design__playground{margin:-32px}}.design__editor{background:#000}.design__error{background:rgba(0,0,0,.5);box-sizing:border-box;color:var(--color-error);position:sticky;top:0}.design__preview,.react-live-error{padding:24px}@media (min-width:961px){.design__preview,.react-live-error{padding:32px}}.design__preview{position:relative}@media (min-width:961px){.design__preview{position:static}}@media (min-width:961px){.design__playground{display:flex;height:calc(100vh - 47px)}.design__editor,.design__preview{width:50%;overflow:scroll}}.design__component-playground-code{max-height:100px;overflow:hidden;position:relative}.design__component-playground-code.show-code{max-height:none}.design__component-playground-clipboard{padding:0;position:absolute;right:10px;top:10px}.design__component-playground-show-code{margin-top:1em;text-align:center}.design__playground-examples{margin-bottom:1em;text-align:right}.design__playground-examples .select-dropdown__container{text-align:left}:root{--masterbar-height:46px;--sidebar-width-max:272px;--sidebar-width-min:228px}@font-face{font-display:swap;font-family:Recoleta;font-weight:400;src:url(https://s1.wp.com/i/fonts/recoleta/400.woff2) format("woff2"),url(https://s1.wp.com/i/fonts/recoleta/400.woff) format("woff")}.wp-brand-font{font-family:"Noto Serif",Georgia,Times New Roman,Times,serif;font-weight:400}[lang*=af] .wp-brand-font,[lang*=ca] .wp-brand-font,[lang*=cs] .wp-brand-font,[lang*=da] .wp-brand-font,[lang*=de] .wp-brand-font,[lang*=en] .wp-brand-font,[lang*=es] .wp-brand-font,[lang*=eu] .wp-brand-font,[lang*=fi] .wp-brand-font,[lang*=fr] .wp-brand-font,[lang*=gl] .wp-brand-font,[lang*=hr] .wp-brand-font,[lang*=hu] .wp-brand-font,[lang*=id] .wp-brand-font,[lang*=is] .wp-brand-font,[lang*=it] .wp-brand-font,[lang*=lv] .wp-brand-font,[lang*=mt] .wp-brand-font,[lang*=nb] .wp-brand-font,[lang*=nl] .wp-brand-font,[lang*=pl] .wp-brand-font,[lang*=pt] .wp-brand-font,[lang*=ro] .wp-brand-font,[lang*=ru] .wp-brand-font,[lang*=sk] .wp-brand-font,[lang*=sl] .wp-brand-font,[lang*=sq] .wp-brand-font,[lang*=sr] .wp-brand-font,[lang*=sv] .wp-brand-font,[lang*=sw] .wp-brand-font,[lang*=tr] .wp-brand-font,[lang*=uz] .wp-brand-font{font-family:Recoleta,"Noto Serif",Georgia,Times New Roman,Times,serif}code[class*=lang-]{color:#393a34;direction:ltr;text-align:left;white-space:pre;line-height:1.2em;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}code[class*=lang-]::-moz-selection,code[class*=lang-] ::-moz-selection,code[class*=lang-]::selection,code[class*=lang-] ::selection{background:#b3d4fc}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#969896;font-style:italic}.token.namespace{opacity:.7}.token.string{color:#c397d8}.token.attr-value{color:#b9ca4a}.token.boolean,.token.constant,.token.inserted,.token.number,.token.property,.token.regex,.token.symbol,.token.url,.token.variable{color:#0086b3;font-weight:600}.language-autohotkey .token.selector,.token.atrule,.token.attr-name{color:#7aa6da;font-weight:400}.language-autohotkey .token.tag,.token.deleted,.token.function{color:#eaeaea}.token.tag{color:#e05600;font-weight:600}.token.selector{color:green}.language-autohotkey .token.keyword{color:#c397d8}.token.bold,.token.function,.token.important{font-weight:600}.token.italic{font-style:italic}.token.punctuation{color:#868686}.token.operator{color:#a2a2a2}.token.keyword{color:#e7c547}.token.entity,.token.function{color:#d54e53}