@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";:root{--font-family: Roboto, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;line-height:1.5;--font-weight: 400;--colorBgPrimary: #F3F3F6;--colorBgSecondary: #ffffff;--colorAccentPrimary: #2525D0;--colorAccentPrimaryHover: #2929A3;--colorAccentSecondary: #F8F8FC;--colorAccentSecondaryHover: #EAEAF6;--colorAccentTertiary: #5A328A;--colorFeedbackInfo: #EEF2FC;--colorFeedbackInfoAccent: #A8BDF0;--colorFeedbackError: #FDEDF2;--colorFeedbackErrorAccent: #ED5A8B;--colorFeedbackWarning: #F8FAD1;--colorFeedbackWarningAccent: #E9C534;--colorFeedbackSuccess: #BCF0D6;--colorFeedbackSuccessAccent: #16CA52;--colorContrastDark: #F4F4F6;--colorContrastLight: #26262C;--colorNeutral100: #383842;--colorNeutral200: #676779;--colorNeutral300: #9C9CAB;--colorNeutral400: #D8D8DE;--colorNeutral500: #E9E9EC;--fontTitleHero: 3rem;--fontSubTitle: 2rem;--fontTextLarge: 1.5rem;--fontTextMedium: 1.25rem;--fontText: 1rem;--fontLabel: .875rem;--fontSmallLabel: .75rem;--colorAccent: #9381ff;--colorAccentHover: #b8b8ff;--colorAccentText: #5e2bff}*{margin:0;padding:0;border:0;box-sizing:border-box;scroll-behavior:smooth}a{text-decoration:none}body{background-color:var(--colorBgSecondary);font-family:var(--font-family)}.btn-accent{display:flex;padding:.5rem 1rem;font-size:var(--fontTextMedium);font-weight:500;color:var(--colorContrastLight);background-color:var(--colorAccent);border:solid 2px var(--colorAccent);border-radius:.5rem;transition:.2s;cursor:pointer}.btn-accent:Hover{background-color:var(--colorAccentHover)}.btn-accent:active{background-color:var(--colorAccent)}.btn-outline{padding:.5rem 1rem;font-size:var(--fontTextMedium);font-weight:500;border:solid 2px var(--colorAccent);border-radius:.5rem;color:var(--colorContrastLight);background-color:transparent;transition:.2s;cursor:pointer}.btn-outline:hover{background-color:var(--colorAccentHover)}.btn-outline:focus{background-color:var(--colorAccent)}header{max-width:90rem;padding:2rem 9.75rem;margin:auto}.hero-container{max-width:90rem;margin:auto;margin-top:4rem;display:flex;align-items:start;justify-content:space-between;padding:2rem 9.75rem;gap:1rem}.hero-content{width:100%;min-width:22rem;display:flex;flex-direction:column}.hero-content h1{font-size:var(--fontTitleHero);color:var(--colorNeutral200)}.hero-content p{font-size:var(--fontTextLarge);color:var(--colorNeutral100)}.hero-content .hero-cta{margin-top:1rem;display:flex;gap:1rem}.introduction-container{width:100%;margin-top:7.5rem;padding:5rem 9.75rem;background-color:var(--colorBgPrimary)}.introduction-content{max-width:50rem;display:grid;justify-content:center;margin:auto}.introduction-content h2{text-align:center;font-size:var(--fontSubTitle);font-weight:500;color:var(--colorContrastLight)}.introduction-content p{text-align:left;font-size:var(--fontTextMedium);color:var(--colorNeutral100)}.foundation-container{width:100%;padding:5rem 9.75rem;background-color:var(--colorBgPrimary)}.foundation-container h3{max-width:90rem;margin:auto;font-size:var(--fontSubTitle);color:var(--colorContrastLight)}.foundation-container p{max-width:90rem;margin:auto;font-size:var(--fontTextLarge);color:var(--colorNeutral200)}.foundation-content{max-width:90rem;margin:auto;margin-top:5rem;display:flex}.foundation-grid-cards{width:100%;display:flex;flex-wrap:wrap;gap:2.5rem}.foundation-grid-cards .foundation-card{width:20rem}.foundation-grid-cards .foundation-card p{font-size:var(--fontText)}.foundation-card .foundation-card-header{display:flex;align-items:center;gap:1rem}.foundation-card .foundation-card-header h3{font-size:var(--fontTitleHero);color:var(--colorNeutral200)}.foundation-card .foundation-card-header svg{width:3.75rem;height:3.75rem;color:var(--colorAccentTertiary)}.foundation-content .foundation-description h3{font-size:var(--fontSubTitle);color:var(--colorContrastLight)}.foundation-content .foundation-description p{margin-top:.5rem;font-size:var(--fontText)}.components-section{max-width:90rem;padding:5rem 9.75rem;margin:auto}.components-section h3{text-align:center;color:var(--colorContrastLight);font-size:var(--fontSubTitle)}.components-section p{text-align:center;color:var(--colorNeutral200);font-size:var(--fontTextLarge)}.grid-components{margin-top:2.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,auto));gap:1rem}.grid-components .card-component{width:12rem;height:10rem;display:flex;align-items:center;justify-content:center;background-color:var(--colorBgPrimary);border:solid 2px var(--colorNeutral400);border-radius:.5rem}.components-section .btn-accent{margin:auto;display:flex;justify-content:center;margin-top:1.5rem;width:12rem;text-decoration:none}.properties{position:fixed;right:0;width:20rem;height:100dvh;display:flex;flex-direction:column;padding:2rem 1rem;background-color:var(--colorBgPrimary);border-radius:.5rem;transform:translate(100%);overflow-y:scroll;transition:.2s}.properties section{height:auto;display:flex;align-items:center;flex-direction:column;gap:1rem}.properties section div{width:100%}.components-bar{position:fixed;width:16rem;height:100dvh;background-color:var(--colorBgPrimary);padding:1rem;border-radius:.5rem;overflow-y:scroll}.components-bar img{width:10rem}.components-bar h3{margin-top:1rem;color:var(--colorNeutral100);font-weight:500;font-size:var(--fontTextMedium)}.components-bar h4{margin-top:.5rem;margin-left:.5rem;font-size:var(--fontTextMedium);font-weight:400;color:var(--colorNeutral200);cursor:pointer;transition:.2s}.components-bar h4:hover,.components-bar h4:focus{color:var(--colorAccent)}.components-bar details summary{margin-top:.5rem;margin-left:.5rem;list-style:none;position:relative;font-size:var(--fontTextMedium);font-weight:400;color:var(--colorNeutral200);cursor:pointer;transition:.2s}.components-bar details summary:before{content:"";position:absolute;right:0;top:1rem;width:1rem;height:.125rem;border-radius:1rem;background-color:var(--colorAccent);transform:rotate(90deg);transition:.2s}.components-bar details summary:after{content:"";position:absolute;right:0;top:1rem;width:1rem;height:.125rem;border-radius:1rem;background-color:var(--colorAccent)}.components-bar details summary:hover,.components-bar details summary:focus{color:var(--colorAccent)}.components-bar details summary:focus:before{transform:rotate(180deg)}.components-bar details[open] summary:before{transform:rotate(180deg)}.components-bar details ul li{margin-top:.5rem;margin-left:1rem;font-size:var(--fontText);list-style:none;color:var(--colorNeutral100);cursor:pointer;transition:.2s}.components-bar details ul li:hover{margin-left:1.5rem;color:var(--colorAccent);font-weight:500;text-decoration:underline;text-underline-offset:.5rem}ul li.active{color:var(--colorNeutral400);font-weight:500;text-decoration:underline;text-underline-offset:.5rem}.wiki-dsa{max-width:90rem;width:100%;padding:2rem 2rem 2rem 18rem;margin:auto;display:flex;flex-direction:column;gap:4rem}.wiki-dsa .components-container{width:100%;height:100%}.wiki-dsa .components-container h1{font-size:var(--fontSubTitle);color:var(--colorNeutral200)}.wiki-dsa .components-container .copy-components p{font-size:var(--fontTextLarge);color:var(--colorNeutral200)}.wiki-dsa .components-container .copy-components .get-code{width:44px;height:40px;margin:auto;margin-top:1rem;display:block;padding:.5rem;background-color:var(--colorAccent);border:solid 2px var(--colorAccent);border-radius:.5rem;transition:.2s;cursor:pointer;overflow:hidden}.wiki-dsa .components-container .copy-components .get-code:hover{background-color:var(--colorAccentHover);width:12rem;display:flex;align-items:center;gap:1rem;text-wrap:nowrap}.wiki-dsa .components-container .copy-components .get-code:active{background-color:var(--colorAccent);transform:scale(.8)}.wiki-dsa .components-container .copy-components .get-code p{color:var(--colorContrastLight);font-size:var(--fontTextMedium);font-weight:500}.wiki-dsa .components-container .copy-components .output-component{width:90%;min-height:16rem;height:auto;margin:auto;margin-top:1rem;display:flex;align-items:center;justify-content:center;padding:1rem;border:solid 2px var(--colorNeutral300);border-radius:1rem;overflow:hidden}.showProperties{transform:translate(0)}.d-none{display:none}.BtnPriDsa{padding:.5rem 1rem;border:solid 2px var(--colorAccentPrimary);border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:var(--colorAccentPrimary);color:var(--colorContrastDark)}.BtnPriDsa:hover{background-color:var(--colorAccentPrimaryHover)}.BtnPriDsa:focus{border:solid 2px var(--colorAccentSecondaryHover)}.BtnIcnPriDsa{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;padding:.5rem;border:solid 2px var(--colorAccentPrimary);border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:var(--colorAccentPrimary);color:var(--colorContrastDark)}.BtnIcnPriDsa:hover{background-color:var(--colorAccentPrimaryHover)}.BtnIcnPriDsa:focus{border:solid 2px var(--colorAccentSecondaryHover)}.BtnIcnSecDsa{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;padding:.5rem;border:solid 2px var(--colorAccent);border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:var(--colorAccentSecondary);color:var(--colorContrastLight)}.BtnIcnSecDsa:hover{background-color:var(--colorAccentSecondaryHover)}.BtnIcnSecDsa:focus{background-color:var(--colorAccentSecondary)}.BtnIcnTerDsa{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;padding:.5rem;border:solid 2px transparent;border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:transparent;color:var(--colorAccentPrimary)}.BtnIcnTerDsa:hover{color:var(--colorAccentPrimaryHover)}.BtnIcnTerDsa:focus{border:solid 2px var(--colorAccentSecondaryHover)}.BtnTerDsa{padding:.5rem 1rem;border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:transparent;color:var(--colorAccentPrimary);text-decoration:underline;text-underline-offset:2px}.BtnTerDsa:hover{color:var(--colorAccentPrimaryHover)}.BtnTerDsa:focus{color:var(--colorAccentPrimary)}.BtnSecDsa{padding:.5rem 1rem;border:solid 2px var(--colorAccentPrimary);border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:transparent;color:var(--colorContrastLight)}.BtnSecDsa:hover{background-color:var(--colorAccentSecondaryHover)}.BtnSecDsa:focus{border:solid 2px var(--colorAccentSecondaryHover)}.BtnIcnLtDsa{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border:solid 2px var(--colorAccentPrimary);border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:var(--colorAccentPrimary);color:var(--colorContrastDark)}.BtnIcnLtDsa:hover{background-color:var(--colorAccentPrimaryHover)}.BtnIcnLtDsa:focus{border:solid 2px var(--colorAccentSecondaryHover)}.BtnDangerDsa{padding:.5rem 1rem;border:solid 2px var(--colorFeedbackErrorAccent);border-radius:999px;font-size:var(--fontTextAccent);font-weight:500;background-color:var(--colorFeedbackErrorAccent);color:var(--colorContrastDark)}.BtnDangerDsa:hover{background-color:var(--colorFeedbackError);color:var(--colorFeedbackErrorAccent)}.BtnDangerDsa:focus{border:solid 2px var(--colorFeedbackError)}