:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.button{display:inline-flex;align-items:center;justify-content:center;padding:1.2rem 2.4rem;border-radius:.6rem;font-size:1.4rem;font-weight:500;cursor:pointer;border:none;background-color:transparent;transition:all .2s ease}.button--primary{background-color:#7e71af;color:#fff}.button--primary:hover{background-color:#a091d7;box-shadow:0 0 0 3px #c2b3f4}.button--primary:focus{background-color:#a091d7;box-shadow:0 0 0 3px #c2b3f4}.button--primary.hover-state{background-color:#a091d7;box-shadow:0 0 0 3px #c2b3f4}.button--secondary{border:1px solid #a091d7;color:#a091d7}.button--secondary:hover{box-shadow:0 0 0 3px #c2b3f4;color:#a091d7}.button--secondary:focus{box-shadow:0 0 0 3px #c2b3f4;color:#a091d7}.button--secondary.hover-state{box-shadow:0 0 0 3px #c2b3f4;color:#a091d7}.button--secondary.button--disabled{background-color:transparent;color:#d6d6d7;border-color:#d6d6d7}.button--disabled{pointer-events:none;background-color:#d6d6d7}.hover-state{pointer-events:none}.checkbox-group{display:flex;flex-direction:column;gap:1.6rem}.checkbox{display:inline-flex;align-items:center;gap:1.2rem;cursor:pointer}.checkbox__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0)}.checkbox__input:checked+.checkbox__custom{border-color:#7e71af;background-color:#7e71af}.checkbox__input:checked+.checkbox__custom svg{opacity:1;transform:translate(-50%,-50%) scale(1)}.checkbox__input:focus+.checkbox__custom{box-shadow:0 0 0 3px #c2b3f4}.checkbox__input:disabled+.checkbox__custom{border-color:#d6d6d7;background-color:#d6d6d7;cursor:not-allowed;pointer-events:none}.checkbox__input:disabled+.checkbox__custom svg{opacity:1}.checkbox__input:disabled+.checkbox__custom:hover{border-color:#d6d6d7}.checkbox__input:disabled~.checkbox__label{color:#d6d6d7;pointer-events:none}.checkbox__input:focus:not(:disabled)+.checkbox__custom{border-color:#7e71af;box-shadow:0 0 0 3px #c2b3f4}.checkbox__custom{position:relative;width:2rem;height:2rem;border:.2rem solid #D8D4E7;background-color:#f2f1f7;border-radius:.5rem;transition:all .2s ease}.checkbox__custom svg{position:absolute;top:50%;left:55%;width:13px;height:13px;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:all .2s ease}.checkbox__label{font-size:1.4rem;color:#444;-webkit-user-select:none;user-select:none}.checkbox:not(:has(:disabled)):hover .checkbox__custom{border-color:#7e71af}.header{display:flex;justify-content:space-between;align-items:center;padding:2rem;gap:1.6rem;background-color:#4c4469}.header__title{color:#fff;font-size:3.2rem;font-weight:700;font-family:Roboto,sans-serif}.header__search{width:100%;max-width:60rem}@media (max-width: 768px){.header{padding:1.6rem}.header__title{font-size:2.4rem}.header__search{max-width:100%}}.search-input{width:100%;padding:1.2rem 1.6rem;border:none;border-radius:.6rem;font-size:1.4rem;font-family:Roboto,sans-serif;background-color:#ffffffe6;color:#444;transition:background-color .2s ease}.search-input::placeholder{color:#444}.search-input:focus{outline:none;background-color:#fff}.input-group{display:flex;flex-direction:column;gap:2rem;max-width:300px}.input-wrapper{display:flex;flex-direction:column;gap:.8rem}.input-label{font-size:1.4rem;color:#444;font-weight:500}.input-container{position:relative;display:flex;align-items:center;flex-wrap:wrap;column-gap:.5rem}.input-container svg{width:18px;height:18px}.input{width:calc(100% - 18px - .5rem);padding:1.2rem 1.6rem;font-size:1.4rem;border:.1rem solid #e5e5e5;border-radius:.6rem;background-color:#fff;color:#444;transition:all .2s ease}.input::placeholder{color:#999}.input:focus{outline:none;border-color:#c3c3c3}.input-error{width:100%;font-size:10px;color:#ff715b}.input--valid{border-color:#06d6a0;background-color:#06d6a04d}.input--valid:focus{border-color:#05c190}.input--invalid{border-color:#ff715b;background-color:#ff715b4d}.input--invalid:focus{border-color:#ff5338}.input-tooltip{position:relative;cursor:pointer}.input-tooltip .tooltip-text{opacity:0;visibility:hidden;position:absolute;z-index:1000;top:100%;left:50%;width:fit-content;min-width:230px;padding:.8rem 1.2rem;color:#444;border:1px solid #FFC857;font-size:1.2rem;border-radius:.4rem;transform:translate(-50%);background-color:#fff;transition:all .2s ease}.input-tooltip.active .tooltip-text,.input-tooltip:hover .tooltip-text{opacity:1;visibility:visible}.radio-group{display:flex;flex-direction:column;gap:1.6rem}.radio{display:inline-flex;align-items:center;gap:1.2rem;cursor:pointer}.radio__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0)}.radio__input:checked+.radio__custom{border-color:#7e71af}.radio__input:checked+.radio__custom:after{transform:translate(-50%,-50%) scale(1)}.radio__input:focus+.radio__custom{border-color:#7e71af}.radio__input:focus+.radio__custom:after{transform:translate(-50%,-50%) scale(1)}.radio__input:disabled+.radio__custom{border-color:#cfcfd0;cursor:not-allowed;pointer-events:none}.radio__input:disabled+.radio__custom:after{background-color:#cfcfd0}.radio__input:disabled+.radio__custom:hover{border-color:#cfcfd0}.radio__input:disabled+.radio__custom:hover:after{background-color:#cfcfd0}.radio__input:disabled~.radio__label{color:#cfcfd0;cursor:not-allowed}.radio__input:focus:not(:disabled)+.radio__custom{box-shadow:0 0 0 3px #7e71af33}.radio__custom{position:relative;width:2rem;height:2rem;border:.2rem solid #7e71af;border-radius:50%;transition:all .2s ease}.radio__custom:after{content:"";position:absolute;top:50%;left:50%;width:1.2rem;height:1.2rem;background-color:#7e71af;border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease}.radio__custom:hover{border-color:#a091d7}.radio__custom:hover:after{background-color:#a091d7}.radio__label{font-size:1.4rem;color:#333;-webkit-user-select:none;user-select:none}.radio:not(:has(:disabled)):hover .radio__custom{border-color:#a091d7}.radio:not(:has(:disabled)):hover .radio__custom:after{background-color:#a091d7}.sidebar{width:25rem;background-color:#fff;border-right:.1rem solid #eee;padding:2rem 0;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar__nav{position:sticky;top:2rem}.sidebar__list,.sidebar__sublist{list-style:none;padding:0;margin:0}.sidebar__sublist{margin-left:2rem}.sidebar__item{margin-bottom:1.6rem}.sidebar__item>.sidebar__link{font-size:1.6rem;font-weight:700;color:#474649}.sidebar__subitem{margin-bottom:.8rem}.sidebar__subitem>.sidebar__link{font-size:1.4rem;font-weight:400}.sidebar__link{display:block;padding:.5rem 2rem;color:#444;text-decoration:none;font-size:1.4rem;transition:color .2s ease}.sidebar__link:hover{color:#a091d7}.switch-group{display:flex;flex-direction:column;gap:1.6rem}.switch{display:inline-flex;align-items:center;gap:1.2rem;cursor:pointer}.switch__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0)}.switch__input:checked+.switch__track{border-color:#c2b3f480;background-color:#c2b3f4}.switch__input:checked+.switch__track .switch__thumb{transform:translate(calc(3.2rem - 1.6rem - .1rem * 2),-52%)}.switch__input:disabled+.switch__track{background-color:#cfcfd0;cursor:not-allowed;pointer-events:none}.switch__input:disabled+.switch__track .switch__thumb{background-color:#f3f3f3;box-shadow:none}.switch__input:disabled~.switch__label{color:#cfcfd0;cursor:not-allowed}.switch__input:focus+.switch__track{box-shadow:0 0 0 3px #c2b3f480;border-color:#c2b3f480}.switch__track{position:relative;width:3.2rem;height:1.6rem;background-color:#f2f1f7;border:1px solid #f2f1f7;border-radius:1.6rem;padding:.1rem;transition:all .2s ease}.switch__thumb{position:absolute;top:50%;left:.1rem;width:1.6rem;height:1.6rem;background-color:#fff;border-radius:50%;transform:translateY(-52%);transition:all .2s ease;box-shadow:1px 1px 1px #00000040}.switch__label{font-size:1.4rem;color:#444;-webkit-user-select:none;user-select:none}.switch:not(:has(:disabled)):hover .switch__track{background-color:#dedbeb}.switch:not(:has(:disabled)):hover .switch__input:checked+.switch__track{background-color:#ad99f0}*{margin:0;padding:0;box-sizing:border-box}html{font-size:10px}body{font-family:Roboto,sans-serif;line-height:1.6;color:#444;background-color:#f2f1f7}.layout{display:flex;min-height:calc(100vh - 7.2rem)}.content{flex:1;max-width:calc(100% - 25rem);margin:0;padding:2rem}.section{margin-bottom:4rem}.section__title{font-size:2.4rem;margin-bottom:2rem;color:#474649}.component{background:#fff;border-radius:8px;padding:2rem;margin-bottom:2rem}.component__title{font-size:1.8rem;margin-bottom:1.6rem;color:#474649}.component__section{margin-bottom:3.2rem}.component__subtitle{font-size:1.6rem;color:#444;margin-bottom:1.6rem}.component__demo{display:flex;gap:1.6rem;flex-wrap:wrap}.component__item{display:flex;flex-direction:column;align-items:center;gap:.8rem}.component__state{font-size:1.2rem;color:#444;font-weight:500}@media (max-width: 768px){.layout{flex-direction:column}.sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid #eee;position:relative}.sidebar__nav{position:relative;top:0}.sidebar__link{padding:1.2rem 2rem}.content{max-width:100%}}