.design-system-page{--sidebar-width-collapsed:3.5rem;--sidebar-width-expanded:12rem}.design-system-content{margin-left:var(--sidebar-width-collapsed);transition:margin-left .3s}.sidebar-expanded .design-system-content{margin-left:var(--sidebar-width-expanded)}.sidebar-expandable{opacity:0;max-height:0;transition:max-height .56s cubic-bezier(.33,1,.68,1),opacity .48s,transform .52s cubic-bezier(.33,1,.68,1);overflow:hidden;transform:translateY(-6px)}.sidebar-expandable.expanded{opacity:1;max-height:1200px;transform:translateY(0)}.sidebar-expandable.collapsed{opacity:0;max-height:0;transform:translateY(-4px)}.sidebar-expandable.collapsed-circles{opacity:1;max-height:900px;transform:translateY(0)}.sidebar-content{transition:opacity .2s,transform .3s ease-out}.interactive-element{line-height:1.2;transition:background-color .32s,transform .32s,color .32s}.interactive-element:hover{transform:translate(2px)}.sidebar-item-active{position:relative}.sidebar-item-active:before{content:"";background:var(--brand-gradient);border-radius:999px;width:4px;height:70%;position:absolute;top:50%;left:-10px;transform:translateY(-50%);box-shadow:0 0 12px #6366f159}.padlock-toggle{border:1px solid #0000}.padlock-toggle:hover{cursor:pointer;border-color:#94a3b880}.mini-icon-active{transform:scale(1.2);box-shadow:0 0 0 6px #6366f11f}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}.scrollbar-hide::-webkit-scrollbar{display:none}.button-cta{background:var(--action-gradient);color:#fff;cursor:pointer;will-change:transform;border:1px solid #9333ea33;font-weight:600;transition:all .3s;position:relative;overflow:hidden;transform:translateZ(0);box-shadow:0 4px 14px #9333ea40}.button-cta:hover{background:linear-gradient(90deg,#6d28d9,#7e22ce,#4f46e5);border-color:#9333ea4d;box-shadow:0 6px 20px #9333ea66}.button-cta:before{content:"";border-radius:inherit;opacity:0;z-index:-1;background:linear-gradient(90deg,#8b5cf6,#a855f7,#818cf8);padding:1px;transition:opacity .3s;position:absolute;inset:0}.button-cta:hover:before{opacity:1}.button-cta:after{content:"";background:linear-gradient(90deg,#0000,#ffffff1a,#0000);transition:transform .7s ease-out;position:absolute;inset:0;transform:translate(-100%)}.button-cta:hover:after{transform:translate(100%)}.text-brand{background:var(--brand-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}.text-cta{background:var(--action-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}.text-midnight{background:var(--midnight-purple-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}.text-ocean{background:var(--ocean-depth-gradient);color:#0000;-webkit-background-clip:text;background-clip:text}