:root{--highlight-color-main:#dd7230;--highlight-color-secondary:#eb5160;--highlight-color-tertiary:#2b7fff}html[data-theme=dark]{--dark:initial;--light: }html[data-theme=light]{--dark: ;--light:initial}html,body{margin:0;padding:0;overflow-x:hidden}.dark-mode-only{display:var(--dark,initial)var(--light,none)}.light-mode-only{display:var(--dark,none)var(--light,initial)}.preview-navbar{z-index:1000;box-sizing:border-box;border-bottom:1px solid var(--primary-color-6);background-color:var(--primary-color);justify-content:space-between;align-items:center;width:100%;padding:.5rem 1rem;display:flex;position:sticky;top:0}.navbar-link{color:var(--secondary-color-4);padding:.5em 0;font-size:1.2em;font-weight:700;text-decoration:none}.navbar-link:hover{color:var(--secondary-color-3)}.navbar-links{gap:1rem;display:flex}.navbar-brand{color:var(--secondary-color-4);align-items:center;font-size:1.5em;font-weight:700;text-decoration:none;display:flex}.code-block{box-sizing:border-box;white-space:pre;border-radius:.5rem;width:100%;max-width:calc(100vw - 2rem);height:100%;max-height:80vh;margin:0;padding:.5rem;font-family:Courier New,Courier,monospace;overflow:scroll}.dark-code-block{display:var(--dark,block)var(--light,none)}.light-code-block{display:var(--dark,none)var(--light,block)}.code-block[data-collapsed=true]{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);-webkit-user-select:none;user-select:none;height:10em;-webkit-mask:linear-gradient(#000 0% 60%,#0000 100%);mask:linear-gradient(#000 0% 60%,#0000 100%)}.dark-mode-toggle{color:var(--secondary-color-4);cursor:pointer;background:0 0;border:none}.copy-button{color:var(--secondary-color-4);cursor:pointer;background:0 0;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.5em;margin:0;padding:0;display:flex}.copy-button:hover{color:var(--highlight-color-tertiary)}.copy-button[data-copied=true]{color:var(--secondary-success-color)}.component-preview{flex-direction:column;justify-content:center;align-items:center;width:100vw;display:flex}.component-preview-contents{flex-direction:column;justify-content:center;align-items:center;width:75vw;margin:20px 0;display:flex}.component-preview-frame{box-sizing:border-box;border:1px solid var(--primary-color-6);background-color:var(--primary-color-2);border-radius:.5em;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:25vh;max-height:100%;padding:20px;display:flex}.component-title{text-align:center;text-transform:capitalize;width:100%;margin-top:20px;margin-bottom:20px;font-size:2em}.component-variants-title{text-align:center;text-transform:capitalize;width:100%;margin-top:20px;margin-bottom:20px;font-size:1.5em}.component-description{margin-left:5vw;margin-right:5vw;font-size:1em;overflow-x:scroll}.component-installation{width:100%;padding:1rem}.component-installation-list{padding-left:2rem;list-style-type:decimal}.component-installation-list li{margin-bottom:.5rem;font-size:1em}.component-code{box-sizing:border-box;border-top-left-radius:.5em;border-top-right-radius:.5em;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:25vh;max-height:100%;padding-top:2rem;display:flex}.masonry-with-columns{flex-wrap:wrap;padding:0 0 0 1rem;display:flex}.masonry-with-columns .masonry-preview-frame{box-sizing:border-box;border:1px solid var(--primary-color-6);background-color:var(--primary-color-2);border-radius:.5rem;flex-direction:column;flex:1 0 auto;align-items:center;max-width:calc(100vw - 2rem);min-height:10rem;margin:0 1rem 1rem 0;padding:3rem;display:flex}.masonry-with-columns .masonry-component-frame{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.preload *{transition:none!important;animation-duration:1ms!important}